JS动态表格


<html> <head> <title> </title> </head> <body> 
<script type="text/javascript"> 
function addRow() 
{ 
  var table=document.getElementById("table"); 
  table.align="center";   var tr=document.createElement("tr");//创建行 
  
  var td1=document.createElement("td");//创建列 
  td1.align="center"; 
  var td2=document.createElement("td");//创建列 
  td2.align="center"; 
  var td3=document.createElement("td");//创建列 
  td3.align="center"; 
  var td4=document.createElement("td");//创建列 
  td4.align="center"; 
  
  var data1=document.createTextNode("办案人"); 
  var data2=document.createTextNode("张三"); 
  var data3=document.createTextNode("13798989898"); 
  var button=document.createElement("input"); 
  
  button.setAttribute("type","button"); 
  button.setAttribute("value","删除"); 
  button.onclick=function delCell() 
    { 
var deltr = this.parentNode.parentNode;
deltr.parentNode.removeChild(deltr);
    }   
  td1.appendChild(data1); 
  td2.appendChild(data2); 
  td3.appendChild(data3); 
  td4.appendChild(button);   tr.appendChild(td1); 
  tr.appendChild(td2); 
  tr.appendChild(td3); 
  tr.appendChild(td4); 
  
  //table.firstChild.insertBefore(tr); 
  table.rows[table.rows.length-1].appendChild(tr);
} 
</script> 
<table border="1px" id="table"width="820px" height="75px" align="center" cellpadding="1" cellspacing="0"  bgcolor="#e5e5e5" style="font-size:12px;text-align:left;"> 
      <tr align="center"> 
    <td width="200"> </td> 
      <td width="200"> </td> 
      <td width="326"> </td> 
      <td width="150"> </td> 
      </tr> 
      </table>  
<input name="b" id="b" type="button" value="b" onClick="addRow();"> </body> </html>