實現表格的增加，刪除，復制，克隆
阿新 • • 發佈：2017-06-20
first doctype change att -c char doc 克隆 nbsp
<!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 varnewtr=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>
實現表格的增加，刪除，復制，克隆