<!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>
2.利用表格特有方法实现增删和修改样式
<!DOCTYPE html> <html lang="en"> <style> .mytd { font: 12px/14px bold; color: red; } </style> <head> <meta charset="UTF-8"> <title>table row</title> <script> function append() { var mytb = document.getElementById('mytb'); var row=mytb.insertRow(2);//在目标位置插入一行 var td0=row.insertCell(0);//创建一个单元格 td0.innerHTML="幸福来敲门" var td1=row.insertCell(1); td1.innerHTML="20"; } function dele(){ var mytb = document.getElementById('mytb'); mytb.deleteRow(1); } function changesty() { var mytb = document.getElementById('mytb'); mytb.rows[0].className="mytd"; } </script> </head> <body> <table border="1" cellpadding="0" cellspacing="0" id="mytb"> <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="增加一行" onclick="append()"> <input type="button" value="删除第二行" onclick="dele()"> <input type="button" value="改变第一行样式" onclick="changesty()"> </body> </html>