您当前的位置: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>操作表格</title> <style type="text/css"> body{ font-size:13px; line-height:25px; } table{ border-top: 1px solid #333; border-left: 1px solid #333; width:300px; } td{ border-right: 1px solid #333; border-bottom: 1px solid #333; } .center{ text-align:center; } </style> <script type="text/javascript"> function addRow(){ var fRow=document.getElementById("row3"); var newRow=document.createElement("tr") ; //创建行节点 var col1=document.createElement("td"); //创建单元格节点 col1.innerHTML="幸福从天而降"; //为单元格添加文本 var col2=document.createElement("td"); col2.innerHTML="¥18.50"; col2.setAttribute("align","center"); newRow.appendChild(col1); //把单元格添加到行节点中 newRow.appendChild(col2); document.getElementById("row3").parentNode.insertBefore(newRow,fRow); //把行节点添加到表格末尾 } function updateRow(){ var uRow=document.getElementById("row1"); //标题行设置为字体加粗、文本居中显示，背景颜色为灰色 uRow.setAttribute("style","font-weight:bold;text-align:center;background-color: #cccccc;"); } function delRow(){ var dRow=document.getElementById("row2"); //访问被删除的行 dRow.parentNode.removeChild(dRow); //删除行 } function copyRow(){ var oldRow=document.getElementById("row3"); //访问复制的行 var newRow=oldRow.cloneNode(true); //复制指定的行及子节点 document.getElementById("myTable").appendChild(newRow); //在指定节点的末尾添加行 } </script> </head> <body> <table border="0" cellspacing="0" cellpadding="0" id="myTable"> <tr id="row1"> <td>书名</td> <td>价格</td> </tr> <tr id="row2"> <td>从你的全世界经过</td> <td class="center">¥30.00</td> </tr> <tr id="row3"> <td>追风筝的人</td> <td class="center">¥32.00</td> </tr> </table> <input name="b1" type="button" value="增加一行" onclick="addRow()" /> <input name="b2" type="button" value="删除第2行" onclick="delRow()"/> <input name="b3" type="button" value="修改标题样式" onclick="updateRow()"/> <input name="b4" type="button" value="复制最后一行" onclick="copyRow()" /> </body> </html>