爱站程序员基地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>
代码片段里注释非常清楚，适合拿来练练手。
以上就是本文的全部内容，希望对大家的学习有所帮助
您可能感兴趣的文章:
- vue.js+Element实现表格里的增删改查
- JS对HTML表格进行增删改操作
- JavaScript获取表格（table）当前行的值、删除行、增加行
- Vue.js实现表格动态增加删除的方法（附源码下载）
- AngularJS实现表格的增删改查（仅限前端）
- 纯原生js实现table表格的增删
- javascript实现动态增加删除表格行(兼容IE/FF)
- js操作table元素实现表格行列新增、删除技巧总结
- 使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
- JavaScript实现动态增删表格的方法
