js操作html增加删除tr/td

最新推荐文章于 2021-06-03 07:22:11 发布

eason26_li

最新推荐文章于 2021-06-03 07:22:11 发布

阅读量201

点赞数

分类专栏： Javascript 文章标签： HTML JavaScript ASP.net Oracle ASP ViewUI

本文链接：https://blog.csdn.net/eason26_li/article/details/83430962

版权

Javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

总结：可以通过parentElement定位父级元素，有待验证


<html>
 <head>
  <title>Adding and Removing Rows from a table using DHTML and JavaScript</title>
  <script language="javascript">

   //add a new row to the table
   function addRow()
   {
    //add a row to the rows collection and get a reference to the newly added row
    var newRow = document.all("tblGrid").insertRow();

    //add 3 cells (<td>) to the new row and set the innerHTML to contain text boxes

    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'>   <input type='button' value='Delete' onclick='removeRow(this);'/>";   
   }

   //deletes the specified row from the table
   function removeRow(src)
   {
    /* src refers to the input button that was clicked. 
       to get a reference to the containing <tr> element,
       get the parent of the parent (in this case case <tr>)
    */   
    var oRow = src.parentElement.parentElement;  

    //once the row reference is obtained, delete it passing in its rowIndex   
    document.all("tblGrid").deleteRow(oRow.rowIndex);  
   }

  </script>
 </head>
 <body>
  Demo of a simple table grid that allows adding and deleting rows using DHTML 
  and Javascript 
  <p/>
  Try it out - Click on the Delete button to delete the corresponding row. Click Add Row button to insert a new row.
  <p/>
  <p/>Browser compatility - this sample has been tested to work with IE5.0 and above.
  <p/>
  <hr>
  <!-- sample table grid with 3 columns and 4 rows that are presented by default -->
  <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" />   <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" />   <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" />   <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" />   <input type="button" value="Delete" onclick="removeRow(this);" /></td>
   </tr>
  </table>
  <hr>
  <input type="button" value="Add Row" onclick="addRow();" />
  <hr>
  <a href='http://www.interviewboard.com'>Interviewboard - Interview Questions and Answers on ASP.NET, C#, SQL, Oracle and more....</a>
 </body>
</html>

文章出处：DIY部落(http://www.diybl.com/course/1_web/javascript/jsjs/200897/139878.html)

eason26_li

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js操作html增加删除tr/td

总结：可以通过parentElement定位父级元素，有待验证[code="java"] Adding and Removing Rows from a table using DHTML and JavaScript //add a new row to the table function addRow() { //add ...
复制链接

扫一扫

专栏目录