涉及小点： 1.表格的增加-插入（一定要找到父节点插入后记得在对应位置 append ） 2.删除是找到父亲的父亲，这样才能删完整行表的内容var tr=obj.parentNode.parentNode;
<!DOCTYPE HTML> <head> <title学生数据表</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=gbk"/> <script type="text/javascript"> //打开页面即可让鼠标悬浮颜色变化 window.onload = function() { var tr=document.getElementsByTagName("tr");//查找行里面的元素集合or(var i= 0;i<tr.length;i++) for(var i= 1;i<tr.length;i++) { bgcChange(tr[i]); } // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。 } //鼠标移动即可改变背景 function bgcChange(obj) { obj.onmouseover=function(){ obj.style.backgroundColor="#f2f2f2"; } obj.onmouseout=function() { obj.style.backgroundColor="#fff"; } } var num=3; //增加函数 function add() { var body=document.body;//建立结点位置 var tab=document.getElementById("tab");//找到插入点的父节点的位置 var tr=document.createElement("tr"); var td1=document.createElement("td"); var td2=document.createElement("td"); var td3=document.createElement("td"); var del=document.createElement("td"); num+=1; //赋值 td1.innerHTML="zhu"+num; td2.innerHTML="000"+num; td3.innerHTML="100"; del.innerHTML="<a href='javascript:;' οnclick='del(this)' >删除</a>"; //将增加的内容放到对应位置 tab.appendChild(tr); tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tr.appendChild(del); var tr=document.getElementsByTagName("tr");//查找行里面的元素集合or(var i= 0;i<tr.length;i++) for(var i= 1;i<tr.length;i++) { bgcChange(tr[i]); } } // body.appendChild(td);//将结点放入对应位置 //body.appendChild(td); function del(obj) { var tr=obj.parentNode.parentNode; tr.parentNode.removeChild(tr); } </script> <style> /*表格居中*/ table { text-align: center; margin:auto; } #tab { border: black 1.5px solid; border-collapse:collapse; } #containt { margin-left: 100px; border-radius: blue 5px solid; padding: 1em; -moz-column-count: 3; -moz-column-gap: 1em; } tr td,th{ border:1px solid red; } </style> </head> <body > <div id="table"> <!--表格背景颜色直接添加在style即可--> <table id="tab" style="background-image: url(./hello-sunshine.jpg);width:1000px;margin:auto;" > <tr> <!--表头单元格--> <th>name</th> <th>id</th> <th>score</th> <th>button</th> </tr> <tr> <td> xiao1 </td> <td> 0001 </td> <td> 100 </td> <td><a href="javascript:;" onclick="del(this);">删除</a></td> <!--在删除按钮上添加点击事件 --> </tr> <tr> <td> xiao2 </td> <td> 0002 </td> <td> 100 </td> <td><a href="javascript:;" onclick="del(this);">删除</a></td> <!--在删除按钮上添加点击事件 --> </tr> <tr> <td> xiao3 </td> <td> 0003 </td> <td> 100 </td> <td><a href="javascript:;" onclick="del(this);">删除</a></td> <!--在删除按钮上添加点击事件 --> </tr> </table> <br/> <input type="button" value="新增表格" onclick="add()" style="margin-left: 30px;position: fixed;" > </div> </body> </html>整体效果：
