2008-02-01

使用Javascript动态增加，删除表格（使用W3C对象模型）

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>

<script language="javascript">
  function deleteRow(index){
    var tableObj=document.getElementById("mainBody");
    var rowObj=document.getElementById('row'+index);

    tableObj.removeChild(rowObj);

  }
  function addRow(){
     var tableObj=document.getElementById("mytable");
     var tableBodyObj=document.getElementById("mainBody");
     var newRowObj=document.createElement("tr");
     newRowObj.id="row"+(tableObj.rows.length-1);
     
     var newColName=document.createElement("td");
     var newColAge=document.createElement("td");
     var newColButton=document.createElement("td");
     
     newColName.innerHTML=document.getElementById("newName").value;
     newColAge.innerHTML=document.getElementById("newAge").value;
     newColButton.innerHTML='<input type="button" value="删除" onclick="deleteRow('+(tableObj.rows.length-1)+')">'; 
     
     newRowObj.appendChild(newColName);
     newRowObj.appendChild(newColAge);
     newRowObj.appendChild(newColButton);
     
     tableBodyObj.appendChild(newRowObj);
     
  }
</script>
</head>

<body>
<table width="100%" id="mytable" border="0" cellspacing="0" cellpadding="0">
 <tbody id="mainBody">
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>操作</td>
  </tr>
  <tr id="row0">
    <td>gaoxiang</td>
    <td>28</td>
    <td><input type="button" onclick="deleteRow(0)" value="删除"/></td>
  </tr>
   <tr id="row1">
    <td>gaoxiang</td>
    <td>28</td>
    <td><input type="button" onclick="deleteRow(1)" value="删除"/></td>
  </tr>
  </tbody>
</table>

<input type="text" name="name" id="newName" />
<input type="text" name="age" id="newAge"/>
<input type="button" onclick="addRow();"  value="新增"/>
</body>
</html>
 
评论
发表评论

您还没有登录，请登录后发表评论

esffor
搜索本博客
最近加入圈子
存档
最新评论