`
zeng916cn
  • 浏览: 37310 次
  • 性别: Icon_minigender_1
  • 来自: 西安
文章分类
社区版块
存档分类
最新评论

动态增加表格

阅读更多

<html>
 <head>
  <title></title>
  <script language="javascript">
   function addRow()
   {
    var newRow = document.all("tblGrid").insertRow();

    var oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t1'>";
   
    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t2'>";
   
    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t3'> &nbsp;&nbsp;<input type='button' value='Delete' onclick='removeRow(this);'/>";  
   }
  
   function removeRow(src)
   {
    var oRow = src.parentElement.parentElement; 
    document.all("tblGrid").deleteRow(oRow.rowIndex); 
   }
 
  </script>
 </head>
 <body>
  <hr>
  <table id="tblGrid" style="table-layout:fixed">
   <tr>
    <td width="150px">Field1</td>
    <td width="150px">Field2</td>
    <td width="250px">Field3</td>
   </tr>
   <tr>
    <td><input type="text" name="t1" /></td>
    <td><input type="text" name="t2" /></td>
    <td><input type="text" name="t3" /> &nbsp;&nbsp;<input type="button" value="Delete" onclick="removeRow(this);" /></td>
   </tr>
   <tr>
    <td><input type="text" name="t1" /></td>
    <td><input type="text" name="t2" /></td>
    <td><input type="text" name="t3" /> &nbsp;&nbsp;<input type="button" value="Delete" onclick="removeRow(this);" /></td>
   </tr>
   <tr>
    <td><input type="text" name="t1" /></td>
    <td><input type="text" name="t2" /></td>
    <td><input type=&quot;text" name="t3" /> &nbsp;&nbsp;<input type="button" value="Delete" onclick="removeRow(this);" /></td>
   </tr>
   <tr>
    <td><input type="text" name="t1" /></td>
    <td><input type="text" name="t2" /></td>
    <td><input type="text" name="t3" /> &nbsp;&nbsp;<input type="button" value="Delete" onclick="removeRow(this);" /></td>
   </tr>
  </table>
  <hr>
  <input type="button" value="Add Row" onclick="addRow();" />
 </body>
</html>

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics