从表中添加/删除行 [英] Add/delete row from a table

问题描述

我有这张表有一些依赖关系的信息，每行有一个添加和删除按钮来添加/删除附加依赖项。当我点击添加按钮时，一个新行被添加到表中，但是当我单击删除按钮时，它将首先删除标题行，然后在随后的单击时删除相应的行。

以下是我的：

Javascript代码

 函数deleteRow（row）{
 var d = row.parentNode.parentNode.rowIndex; 
 document.getElementById（'dsTable'）。deleteRow（d）; 
} 
  

HTML代码

 < table id ='dsTable'> 
< tr> 
< td>关系类型< / td> 
< td>出生日期< / td> 
< td>性别< / td> 
< / tr> 
< tr> 
< td>配偶< / td> 
< td> 1980-22-03< / td> 
< td>女性< / td> 
< td> < input type =buttonid =addDepvalue =Addonclick =add（）< / td> 
< td> < input type =buttonid =deleteDepvalue =Deleteonclick =deleteRow（this）< / td> 
< / tr> 
< tr> 
< td>儿童< / td> 
< td> 2008年2月6日< / td> 
< td>女性< / td> 
< td> < input type =buttonid =addDepvalue =Addonclick =add（）< / td> 
< td> < input type =buttonid =deleteDepvalue =Deleteonclick =deleteRow（this）< / td> 
< / tr> 
< / table> 
  

解决方案

JavaScript有一些修改：

 函数deleteRow（btn）{
 var row = btn.parentNode.parentNode; 
 row.parentNode.removeChild（row）; 
} 
  

与HTML有一点区别：

 < table id =dsTable> 
< tbody> 
< tr> 
< td>关系类型< / td> 
< td>出生日期< / td> 
< td>性别< / td> 
< / tr> 
< tr> 
< td>配偶< / td> 
< td> 1980-22-03< / td> 
< td>女性< / td> 
< td>< input type =buttonvalue =Addonclick =add（）/>< / td> 
< td>< input type =buttonvalue =Deleteonclick =deleteRow（this）/>< / td> 
< / tr> 
< tr> 
< td>儿童< / td> 
< td> 2008-23-06< / td> 
< td>女性< / td> 
< td>< input type =buttonvalue =Addonclick =add（）/>< / td> 
< td>< input type =buttonvalue =Deleteonclick =deleteRow（this）/>< / td> 
< / tr> 
< / tbody> 
< / table> 
< / code> 




I have this table with some dependents information and there is a add and delete button for each row to add/delete additional dependents. When I click "add" button, a new row gets added to the table, but when I click the "delete" button, it deletes the header row first and then on subsequent clicking, it deletes the corresponding row.

Here is what I have:

Javascript code

   function deleteRow(row){
      var d = row.parentNode.parentNode.rowIndex;
      document.getElementById('dsTable').deleteRow(d);
   }

HTML code

<table id = 'dsTable' >
      <tr>
         <td> Relationship Type </td>
         <td> Date of Birth </td>
         <td> Gender </td>
      </tr>
      <tr>
         <td> Spouse </td>
         <td> 1980-22-03 </td>
         <td> female </td>
         <td> <input type="button" id ="addDep" value="Add" onclick = "add()" </td>
         <td> <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(this)"  </td>
      </tr>
       <tr>
         <td> Child </td>
         <td> 2008-23-06 </td>
         <td> female </td>
         <td> <input type="button" id ="addDep" value="Add" onclick = "add()"</td>
         <td>  <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(this)" </td>
      </tr>
   </table>

解决方案

JavaScript with a few modifications:

function deleteRow(btn) {
  var row = btn.parentNode.parentNode;
  row.parentNode.removeChild(row);
}

And the HTML with a little difference:

<table id="dsTable">
  <tbody>
    <tr>
      <td>Relationship Type</td>
      <td>Date of Birth</td>
      <td>Gender</td>
    </tr>
    <tr>
      <td>Spouse</td>
      <td>1980-22-03</td>
      <td>female</td>
      <td><input type="button" value="Add" onclick="add()"/></td>
      <td><input type="button" value="Delete" onclick="deleteRow(this)"/></td>
    </tr>
    <tr>
      <td>Child</td>
      <td>2008-23-06</td>
      <td>female</td>
      <td><input type="button" value="Add" onclick="add()"/></td>
      <td><input type="button" value="Delete" onclick="deleteRow(this)"/></td>
    </tr>
  </tbody>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

这篇关于从表中添加/删除行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！