本文实例为大家分享了js动态实现表格添加和删除的具体代码，供大家参考，具体内容如下
运行效果如图（两种实现方案，被注释的是第一种实现方案）
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=\"UTF-8\">
<title></title>
</head>
<style type=\"text/css\">
div{
text-align:center;
box-sizing: border-box;
width:100%;
}
#div1{
margin-left: 300px;
width: 800px;
margin-top: 50px;
}
#div2{
margin-left: 300px;
width: 800px;
padding-top:50px;
}
#table_id{
width: 580px;
}
</style>
<body>
<div id=\"div0\">
<div id=\"div1\">
<input type=\"text\" id=\"userid\" placeholder=\"请输入编号\" />
<input type=\"text\" id=\"username\" placeholder=\"请输入姓名\" />
<input type=\"text\" id=\"gender\" placeholder=\"请输入性别\" />
<input type=\"button\" value=\"添加\" id=\"add\"/>
</div>
<div id=\"div2\">
<table border=\"1px\" align=\"center\" id=\"table_id\">
<caption style=\"font: \'微软雅黑\';font-size:20px;\">学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>令狐冲</td>
<td>张无忌</td>
<td><input type=\"button\" value=\"删除\" style=\"color: blue;\" onclick=\"delTr(this)\"/></td>
</tr>
<tr>
<td>1</td>
<td>令狐冲</td>
<td>张无忌</td>
<td><input type=\"button\" value=\"删除\" style=\"color: blue;\" onclick=\"delTr(this)\" /></td>
</tr>
<tr>
<td>1</td>
<td>令狐冲</td>
<td>张无忌</td>
<td><input type=\"button\" value=\"删除\"style=\"color: blue;\" onclick=\"delTr(this)\"/></td>
</tr>
</table>
</div>
</div>
</body>
<script type=\"text/javascript\">
// 当点击添加按钮时触发下面的方法
document.getElementById(\"add\").onclick=function(){
// 获取每个文本框中的内容
var id = document.getElementById(\"userid\").value;
var name = document.getElementById(\"username\").value;
var gender = document.getElementById(\"gender\").value;
/* // 添加id
var td_id = document.createElement(\"td\");
var text_id = document.createTextNode(id);
td_id.appendChild(text_id);
// 添加username
var td_username = document.createElement(\"td\");
var text_username = document.createTextNode(name);
td_username.appendChild(text_username);
// 添加gender
var td_gender = document.createElement(\"td\");
var text_gender = document.createTextNode(gender);
td_gender.appendChild(text_gender);
// 添加按钮
var td_button = document.createElement(\"td\");
var ele_input = document.createElement(\"input\");
ele_input.setAttribute(\"type\",\"button\");
ele_input.setAttribute(\"value\",\"删除\");
ele_input.setAttribute(\"onclick\",\"delTr(this)\");
ele_input.style.color=\"blue\";
td_button.appendChild(ele_input);
var ele_tr = document.createElement(\"tr\");
ele_tr.appendChild(td_id);
ele_tr.appendChild(td_username);
ele_tr.appendChild(td_gender);
ele_tr.appendChild(td_button);
var ele_table = document.getElementsByTagName(\"table\")[0];
ele_table.appendChild(ele_tr);*/
// 使用innerHtml的方法动态添加表格
var tab = document.getElementsByTagName(\"table\")[0];
tab.innerHTML+=\"<tr>\\n\"+
\"<td>\"+id+\"</td>\\n\"+
\"<td>\"+name+\"</td>\"+
\"<td>\"+gender+\"</td>\"+
\"<td><input type=\'button\' value=\'删除\' onclick=\'delTr(this)\' style=\'color:blue\'/></td>\"+
\"</tr>\"
}
function delTr(obj){
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容