你的位置:首页 > Java教程

[Java教程]表格操作


<!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="&yen;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 >&yen;30.00</td> </tr> <tr id="row3">  <td>追风筝的人</td>  <td >&yen;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>