<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&qu ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html 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 >¥30.00</td> </tr> <tr id="row3"> <td>追风筝的人</td> <td >¥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>
原标题:表格操作
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。