爱站程序员基地本文实例为大家分享了JavaScript实现简单动态表格的具体代码，供大家参考，具体内容如下
代码：
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>动态表格</title><style>table{border: 1px solid;margin: auto;width: 500px;}td,th{text-align: center;border: 1px solid;}div{text-align: center;margin: 50px;}</style></head><body><div><input type=\"text\" id=\"id\" placeholder=\"请输入编号\"><input type=\"text\" id=\"name\" placeholder=\"请输入姓名\"><input type=\"text\" id=\"gender\" placeholder=\"请输入性别\"><input type=\"button\" value=\"添加\" id=\"btn_add\"></div><table id=\"table\"><caption>学生信息表</caption><tr><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr><td>1</td><td>武大郎</td><td>男</td><td><a href=\"javascript:void(0);\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" onclick=\"delTr(this);\">删除</a></td></tr><tr><td>2</td><td>西门庆</td><td>男</td><td><a href=\"javascript:void(0);\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" onclick=\"delTr(this);\">删除</a></td></tr><tr><td>3</td><td>武二郎</td><td>男</td><td><a href=\"javascript:void(0);\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" onclick=\"delTr(this);\">删除</a></td></tr></table><script>//1.获取btnvar btn_add = document.getElementById(\"btn_add\");//2.绑定单击事件btn_add.onclick = function(){//获取每一个输入框内容var id = document.getElementById(\"id\").value;var name = document.getElementById(\"name\").value;var gender = document.getElementById(\"gender\").value;//获取表格var table = document.getElementById(\"table\");//创建trvar tr = document.createElement(\"tr\");//创建tdvar td_id = document.createElement(\"td\");var text_id = document.createTextNode(id);td_id.appendChild(text_id);tr.appendChild(td_id);var td_name = document.createElement(\"td\");var text_name = document.createTextNode(name);td_name.appendChild(text_name);tr.appendChild(td_name);var td_gender = document.createElement(\"td\");var text_gender = document.createTextNode(gender);td_gender.appendChild(text_gender);tr.appendChild(td_gender);var td_option = document.createElement(\"td\");var a = document.createElement(\"a\");a.setAttribute(\"href\",\"javascript:void(0);\");a.setAttribute(\"onclick\",\"delTr(this)\");var text_a = document.createTextNode(\"删除\");a.appendChild(text_a);td_option.appendChild(a);tr.appendChild(td_option);table.appendChild(tr);}function delTr(obj){var table = obj.parentNode.parentNode.parentNode;var tr = obj.parentNode.parentNode;table.removeChild(tr);}</script></body></html>
以上就是本文的全部内容，希望对大家的学习有所帮助
您可能感兴趣的文章:
- JavaScript如何动态创建table表格
- JS实现从表格中动态删除指定行的方法
- js生成动态表格并为每个单元格添加单击事件的方法
- JS实现动态生成html table表格的方法分析
- javascript如何动态加载表格与动态添加表格行
- JS实现动态生成表格并提交表格数据向后端
- JS实现向表格中动态添加行的方法
- JavaScript中动态向表格添加数据
- js动态修改表格行colspan列跨度的方法
- javascript动态添加表格数据行(ASP后台数据库保存例子)
