实现表格的增加，删除，复制，克隆
Posted 风流倜傥任潇洒， 不负青春好年华。
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现表格的增加，删除，复制，克隆相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>操作表格</title> <script> function append() { var thirdtr=document.getElementById(‘thirdtr‘); var parents=thirdtr.parentNode; //创建一个tr var newtr=document.createElement(‘tr‘); var newtd1=document.createElement(‘td‘); newtd1.innerHTML="当幸福来敲门"; var newtd2=document.createElement(‘td‘); newtd2.innerHTML=30; newtr.appendChild(newtd1); newtr.appendChild(newtd2); parents.insertBefore(newtr,thirdtr); } function dlnode(){ var sencondtr=document.getElementById(‘sencondtr‘); var parents=sencondtr.parentNode; parents.removeChild(sencondtr); } function changesty() { var firsttr=document.getElementById(‘firsttr‘); var firststy=firsttr.setAttribute(‘style‘,‘font:16px;background:#ccc‘); } function clonnode() { var thirdtr=document.getElementById(‘thirdtr‘); var parents=thirdtr.parentNode; // var newtr=document.createElement(‘tr‘) // var newtd1=document.createElement(‘td‘) // newtd1.innerHTML="幸福来敲门"; // var newtd2=document.createElement(‘td‘); // newtd2.innerHTML="20"; var cl=thirdtr.cloneNode(true); parents.appendChild(cl); } </script> </head> <body> <table border="1" cellpadding="0" cellspacing="0"> <tr id="firsttr"> <td>书名</td> <td>价格</td> </tr> <tr id="sencondtr"> <td>看得见的风景</td> <td>20</td> </tr> <tr id="thirdtr"> <td>幸福来敲门</td> <td>30</td> </tr> </table> <input type="button" value="增加一行" id="appennode" onclick="append()"> <input type="button" value="删除第二行" id="dlnode" onclick="dlnode()"> <input type="button" value="修改标题样式" id="changesty" onclick="changesty()"> <input type="button" value="复制最后一行" id="copynode" onclick="clonnode()"> </body> </html>
以上是关于实现表格的增加，删除，复制，克隆的主要内容，如果未能解决你的问题，请参考以下文章