JavaScript怎么实现动态表格
导读：本文共7257字符，通常情况下阅读需要24分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： JavaScript实现动态表格（改建版，代码见最下面）基本效果如下点击添加，可以将输入框中的值，新增到表格中；点击删除可以删除本行内容。代码如下：第一种方式（较简单，建议使用）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。JavaScript实现动态表格
（改建版，代码见最下面）
基本效果如下
点击添加，可以将输入框中的值，新增到表格中；点击删除可以删除本行内容。
代码如下：
第一种方式（较简单，建议使用）
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>动态表格02</title><style>table{border:1pxsolid;margin:auto;width:500px;}td,th{text-align:center;border:1pxsolid;}div{text-align:center;margin:50px;}</style></head><body><div><inputtype="text"id="id"placeholder="请输入id值"><inputtype="text"id="name"placeholder="请输入姓名"><inputtype="text"id="gender"placeholder="请输入性别"><inputtype="button"id="btn_add"value="添加"></div><table><caption>学生信息表</caption><tr><th>id号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr><td>001</td><td>小燕子</td><td>女</td><td><ahref="javascript:void(0);"onclick="delTr(this);">删除</a></td></tr><tr><td>002</td><td>紫薇</td><td>女</td><td><ahref="javascript:void(0);"onclick="delTr(this);">删除</a></td></tr><tr><td>003</td><td>永琪</td><td>男</td><td><ahref="javascript:void(0);"onclick="delTr(this);">删除</a></td></tr><tr><td>004</td><td>尔康</td><td>男</td><td><ahref="javascript:void(0);"onclick="delTr(this);">删除</a></td></tr></table><script>//使用innerHTML给添加按钮绑定事件varelement=document.getElementById("btn_add");element.onclick=function(){//获取文本框中的内容varid=document.getElementById("id").value;varname=document.getElementById("name").value;vargender=document.getElementById("gender").value;//获取tablevartable=document.getElementsByTagName("table")[0];//新增一行table.innerHTML+="<tr>"+"<td>"+id+"</td><td>"+name+"</td><td>"+gender+"</td><td>"+"<ahref=\"javascript:void(0);\"οnclick=\"delTr(this);\">删除</a></td></tr>";}//删除方法functiondelTr(obj){vartable=obj.parentNode.parentNode.parentNode;vartr=obj.parentNode.parentNode;table.removeChild(tr);}</script></body></html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>动态表格02</title><style>table{border:1pxsolid;margin:auto;width:500px;}td,th{text-align:center;border:1pxsolid;}div{text-align:center;margin:50px;}</style></head><body><div><inputtype="text"id="id"placeholder="请输入id值"><inputtype="text"id="name"placeholder="请输入姓名"><inputtype="text"id="gender"placeholder="请输入性别"><inputtype="button"id="btn_add"value="添加"></div><table><caption>学生信息表</caption><tr><th>id号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr><td>001</td><td>小燕子</td><td>女</td><td><ahref="javascript:void(0);"onclick="delTr(this);">删除</a></td></tr><tr><td>002</td><td>紫薇</td><td>女</td><td><ahref="javascript:void(0);"onclick="delTr(this);">删除</a></td></tr><tr><td>003</td><td>永琪</td><td>男</td><td><ahref="javascript:void(0);"onclick="delTr(this);">删除</a></td></tr><tr><td>004</td><td>尔康</td><td>男</td><td><ahref="javascript:void(0);"onclick="delTr(this);">删除</a></td></tr></table><script>//使用innerHTML给添加按钮绑定事件varelement=document.getElementById("btn_add");element.onclick=function(){//获取文本框中的内容varid=document.getElementById("id").value;varname=document.getElementById("name").value;vargender=document.getElementById("gender").value;//获取tablevartable=document.getElementsByTagName("table")[0];//新增一行table.innerHTML+="<tr>"+"<td>"+id+"</td><td>"+name+"</td><td>"+gender+"</td><td>"+"<ahref=\"javascript:void(0);\"οnclick=\"delTr(this);\">删除</a></td></tr>";}//删除方法functiondelTr(obj){vartable=obj.parentNode.parentNode.parentNode;vartr=obj.parentNode.parentNode;table.removeChild(tr);}</script></body></html>简单解释
删除的事件绑定在table表格中，注意看！
方式二
只需要在上述基础上，修改
<script>//给添加按钮绑定事件varelement=document.getElementById("btn_add");element.onclick=function(){//获取文本框的内容varid=document.getElementById("id").value;varname=document.getElementById("name").value;vargender=document.getElementById("gender").value;//在创建一行表格vartd_id=document.createElement("td");vartd_name=document.createElement("td");vartd_gender=document.createElement("td");vartd_a=document.createElement("td");varele_a=document.createElement("a");vartext_id=document.createTextNode(id);td_id.appendChild(text_id);varname_id=document.createTextNode(name);td_name.appendChild(name_id);vargender_id=document.createTextNode(gender);td_gender.appendChild(gender_id);//设置属性值ele_a.setAttribute("href","javascript:void(0);");ele_a.setAttribute("onclick","delTr(this);");vartext_a=document.createTextNode("删除");ele_a.appendChild(text_a);td_a.appendChild(ele_a);vartr=document.createElement("tr");//添加td到tr中tr.appendChild(td_id);tr.appendChild(td_name);tr.appendChild(td_gender);tr.appendChild(td_a);//获取tablevartable=document.getElementsByTagName("table")[0];table.appendChild(tr);}//删除方法functiondelTr(obj){vartable=obj.parentNode.parentNode.parentNode;vartr=obj.parentNode.parentNode;table.removeChild(tr);}</script>简单解释
改进版
又加了一些新功能：鼠标悬停变色，全选，全不选，反选。
效果：框框可以选中，可以全选，可以全不选，可以反选。
代码如下：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>动态表格02</title><style>table{border:1pxsolid;margin:auto;width:500px;}td,th{text-align:center;border:1pxsolid;}div{text-align:center;margin:50px;}.out{background-color:white;}.over{background-color:pink;}</style></head><body><div><inputtype="text"id="id"placeholder="请输入id值"><inputtype="text"id="name"placeholder="请输入姓名"><inputtype="text"id="gender"placeholder="请输入性别"><inputtype="button"id="btn_add"value="添加"></div><table><caption>学生信息表</caption><tr><th><inputtype="checkbox"name="cb"id="firstCb"></th><th>id号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr><td><inputtype="checkbox"name="cb"></td><td>001</td><td>小燕子</td><td>女</td><td><ahref="javascript:void(0);"onclick="delTr(this);">删除</a></td></tr><tr><td><inputtype="checkbox"name="cb"></td><td>002</td><td>紫薇</td><td>女</td><td><ahref="javascript:void(0);"onclick="delTr(this);">删除</a></td></tr><tr><td><inputtype="checkbox"name="cb"></td><td>003</td><td>永琪</td><td>男</td><td><ahref="javascript:void(0);"onclick="delTr(this);">删除</a></td></tr><tr><td><inputtype="checkbox"name="cb"></td><td>004</td><td>尔康</td><td>男</td><td><ahref="javascript:void(0);"onclick="delTr(this);">删除</a></td></tr></table><div><inputtype="button"id="selectAll"value="全选"><inputtype="button"id="unSelectAll"value="全不选"><inputtype="button"id="selectRev"value="反选"></div><script>//使用innerHTML给添加按钮绑定事件varelement=document.getElementById("btn_add");element.onclick=function(){//获取文本框中的内容varid=document.getElementById("id").value;varname=document.getElementById("name").value;vargender=document.getElementById("gender").value;//获取tablevartable=document.getElementsByTagName("table")[0];//新增一行table.innerHTML+="<tr>"+"<td><inputtype=\"checkbox\"name=\"cb\"></td>"+"<td>"+id+"</td><td>"+name+"</td><td>"+gender+"</td><td>"+"<ahref=\"javascript:void(0);\"οnclick=\"delTr(this);\">删除</a></td></tr>";}//删除方法functiondelTr(obj){vartable=obj.parentNode.parentNode.parentNode;vartr=obj.parentNode.parentNode;table.removeChild(tr);}//给前边的选不选添加事件//1.在页面加载完后绑定事件window.onload=function(){//给全选按钮绑定单击事件document.getElementById("selectAll").onclick=function(){//获取所有的checkboxvarcbs=document.getElementsByName("cb");for(vari=0;i<cbs.length;i++){cbs[i].checked=true;}}//全部选按钮绑定事件document.getElementById("unSelectAll").onclick=function(){varcbs=document.getElementsByName("cb");for(vari=0;i<cbs.length;i++){cbs[i].checked=false;}}//反选按钮绑定事件document.getElementById("selectRev").onclick=function(){//反选varcbs=document.getElementsByName("cb");for(vari=0;i<cbs.length;i++){//设置每一个cb的状态为相反cbs[i].checked=!cbs[i].checked;}}//第一个的点击事件document.getElementById("firstCb").onclick=function(){varcbs=document.getElementsByName("cb");//alert("被点击了");//console.log(cbs);for(vari=1;i<cbs.length;i++){//设置每一个cb的状态和第一个cb的状态一样cbs[i].checked=this.checked;}}//给所有tr绑定鼠标移到元素之上和移出元素事件vartrs=document.getElementsByTagName("tr");//遍历for(vari=0;i<trs.length;i++){//移到元素之上trs[i].onmouseover=function(){this.className="over";}//移出元素trs[i].onmouseout=function(){this.className="out";}}}</script></body></html>最后这个代码还有点问题，点击最上边的框框可以全选或者都不选所有。但是当新增几行之后，这个功能就实现不了了。
新增几行之后，鼠标的悬停变色也不能实现了。
javascript是一种什么语言
javascript是一种动态类型、弱类型的语言，基于对象和事件驱动并具有相对安全性并广泛用于客户端网页开发的脚本语言，同时也是一种广泛用于客户端Web开发的脚本语言。它主要用来给HTML网页添加动态功能，现在JavaScript也可被用于网络服务器，如Node.js。
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
JavaScript怎么实现动态表格的详细内容，希望对您有所帮助，信息来源于网络。