爱站程序员基地JavaScript入门
JavaScript是一种轻量级、解释型的Web开发语言，该语言系统不是很庞杂，简单易学。由于所有现代浏览器都已经嵌入了JavaScript引擎，JavaScript源代码可以再浏览器中直接被解释执行，用户不用担心支持问题，这是一个js入门的小练习
对于表格信息的增添与删除
简单的DOM操作html标签即可实现，代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}</style><script type="text/javascript">function delA(){//点击超链接删除那一行//使用this，删除父级元素var tr = this.parentNode.parentNode;//获取要删除人员的名字var name=tr.getElementsByTagName("td")[0].innerHTML;//提示用户是否删除var flag=confirm("是否删除"+name+"？");if(flag){tr.parentNode.removeChild(tr);}//阻止浏览器默认行为，比如弹出新的标签页return false;}window.onload=function(){//点击超链接删除一个员工信息//获取链接var allA=document.getElementsByTagName("a");//绑定响应函数for(var i=0;i<allA.length;i++){allA[i].onclick=delA;}//添加员工功能,点击按钮将信息添加到表格中var addEmpButton = document.getElementById("addEmpButton");addEmpButton.onclick=function(){//获取输入框中的文本内容var empName=document.getElementById("empName").value;var email=document.getElementById("email").value;var salary=document.getElementById("salary").value;//创建一个trvar tr=document.createElement("tr");//向tr中添加内容tr.innerHTML="<td>"+empName+"</td>"+"<td>"+email+"</td>"+"<td>"+salary+"</td>"+"<td><a href='javascript:;'>Delete</a></td>";var a= tr.getElementsByTagName("a")[0];a.onclick=delA;//把tr放在table中var employeeTable=document.getElementById("employeeTable");//获取tbodyvar tbody=document.getElementsByTagName("tbody")[0];tbody.appendChild(tr);}}</script></head><body><table id="employeeTable"><tr><th>Name</th><th>Email</th><th>Salary</th><th> </th></tr><tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@sohu.com</td><td>8000</td><td><a href="">Delete</a></td></tr><tr><td>Bob</td><td>bob@tom.com</td><td>10000</td><td><a href="">Delete</a></td></tr><div id="formDiv"><h4>添加新员工</h4><table><tr><td class="word">name: </td><td class="inp"><input type="text" name="empName" id="empName"></td></tr><tr><td class="word">email: </td><td class="inp"><input type="text" name="email" id="email"></td></tr><tr><td class="word">salary: </td><td class="inp"><input type="text" name="salary" id="salary"></td></tr><tr><td colspan="2" align="center"> <!--colspan和rowspan属性是单元格可横跨的行数和列数--><!--align属性是文本对齐位置--><button id="addEmpButton" value="abc">Submit</button></td></tr></table></div></table></body></html>
代码片段里注释非常清楚，适合拿来练练手。
