您的位置：首页 > Web前端 > JavaScript

使用Javascript动态增加，删除表格

2008-02-13 13:41 691 查看
<html>


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


<head>






<script language="javascript">...




  function deleteRow(index)...{


    var tableObj=document.getElementById("mytable");


    tableObj.deleteRow(tableObj.rows.length-1);


  }




  function addRow()...{


     var tableObj=document.getElementById("mytable");


     var newRowObj=tableObj.insertRow(tableObj.rows.length);


     var newColName=newRowObj.insertCell(newRowObj.cells.length);


     var newColAge=newRowObj.insertCell(newRowObj.cells.length);


     var newColButton=newRowObj.insertCell(newRowObj.cells.length);


     


     newColName.innerHTML=document.getElementById("newName").value;


     newColAge.innerHTML=document.getElementById("newAge").value;


     newColButton.innerHTML='<input type="button" value="删除" onclick="deleteRow();">'; 


  }


</script>


</head>




<body>


<table width="100%" id="mytable" border="0" cellspacing="0" cellpadding="0">


  <tr>


    <td>姓名</td>


    <td>年龄</td>


    <td>操作</td>


  </tr>


  


</table>




<input type="text" name="name" id="newName" />


<input type="text" name="age" id="newAge"/>


<input type="button" onclick="addRow();"  value="新增"/>


</body>


</html> 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript input function table html button
相关文章推荐
新的分享
章节导航