Javascript 从表中添加/删除行

我有一个包含一些依赖项信息的表，每行有一个添加和删除按钮，用于添加/删除其他依赖项。当我单击“添加”按钮时，一个新行被添加到表中，但当我单击“删除”按钮时，它首先删除标题行，然后在随后的单击中删除相应的行

以下是我所拥有的：

Javascript代码

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

HTML代码

<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>

关系类型
出生日期
性别
配偶
1980-22-03 
女性
我会先尝试正确设置您的表格格式，如下所示：

我忍不住想，格式化表格至少不会造成任何伤害

<table>
   <thead>
      <th>Header1</th>
      ......
   </thead>
   <tbody>
       <tr><td>Content1</td>....</tr>
       ......
   </tbody>
</table>


校长1
......
内容1。。。。
......
JavaScript，只做了一些修改：

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

与HTML略有不同：

<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>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​


关系类型
出生日期
性别
配偶
1980-22-03
女性的
小孩
2008-23-06
女性的
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
jQuery有一个很好的函数

之所以很酷，是因为它将“通过测试元素本身并遍历其祖先来获得与选择器匹配的第一个元素。”

$（this.closest（“tr”）.remove（）

每个delete按钮都可以通过函数调用运行非常简洁的代码。
下面是使用jQuery的代码。在所有浏览器上测试。在这里，我们必须单击这些行，才能删除它，并获得漂亮的效果。希望能有所帮助。
嗨，我会这样做：

var id = 4; // inital number of rows plus one
function addRow(){
   // add a new tr with id 
   // increment id;
}

function deleteRow(id){
   $("#" + id).remove();
}

<table id = 'dsTable' >
      <tr id=1>
         <td> Relationship Type </td>
         <td> Date of Birth </td>
         <td> Gender </td>
      </tr>
      <tr id=2>
         <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(2)"  </td>
      </tr>
       <tr id=3>
         <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(3)" </td>
      </tr>
   </table>

我想要一张这样的桌子：

var id = 4; // inital number of rows plus one
function addRow(){
   // add a new tr with id 
   // increment id;
}

function deleteRow(id){
   $("#" + id).remove();
}

<table id = 'dsTable' >
      <tr id=1>
         <td> Relationship Type </td>
         <td> Date of Birth </td>
         <td> Gender </td>
      </tr>
      <tr id=2>
         <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(2)"  </td>
      </tr>
       <tr id=3>
         <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(3)" </td>
      </tr>
   </table>


关系类型
出生日期
性别
配偶
1980-22-03 
女性
有很多好答案，但这里还有一个；）

您可以将单击的处理程序添加到表中

<table id = 'dsTable' onclick="tableclick(event)">

然后，您不必为每一行添加事件处理程序，您的html看起来更整洁。如果您不想在html中使用任何javascript，甚至可以在页面加载时添加处理程序：

document.getElementById('dsTable').addEventListener('click',tableclick,false);

​​

下面是工作代码：
我建议使用jQuery。没有jQuery，您现在所做的很容易实现，但由于您需要新特性和更多功能，jQuery将为您节省大量时间。我还想提到的是，在一个文档中不应该有多个具有相同ID的DOM元素。在这种情况下，请使用class属性

html:

请记住，您需要引用jQuery：


下面是一个正在工作的JSFIDLE示例：
@gdoron可能需要查看HTML代码；=）
onclick=“deleteRow（this）”
@gdoron这是编辑的问题；=）这只会发生在您使用JS代码添加一行之后，还是在第一次加载页面之后？@Makkes-这也会发生在第一次加载页面之后。我无法使用您发布的代码重现这种行为-无论是在Firefox还是Chrome中。您可能希望在发布错误之前检查自己的代码是否存在错误这样回答。您不能在
中放置任何数据。结果通常是数据显示在
@implementor之前，或者是的，这是一个愚蠢的语法错误。从椅子上批评很容易。jQuery有一个很好的函数，可以选择要删除的最近的元素。它节省了对父选择进行硬编码的时间。这也是正确的，但是jQuery需要额外的32K代码，甚至是压缩和gzip的。为了识别这一点+1。但无论如何，您都不应该托管该文件。你应该使用谷歌的CDN来托管它。我敢打赌，如果不是从Google.row.parentNode.remove（row），绝大多数浏览互联网的人已经从另一个网站在他们的计算机上安装了它；应成为row.parentNode.removeChild（row）@lostsource，修复！非常感谢。除了控制行删除之外，jquery还可以帮助绑定行操作，这样您就不会有突兀的js调用，而是可以在按钮上使用它（注意：id不能多次使用），然后在js中使用do
$（'.addDep'）。on（'click'，add'）和
$（'.deleteDep'）。在（'click'，deleteRow'）上
closest（）现在是一个本机JavaScript函数
$('body').on('click', 'input.deleteDep', function() {
   $(this).parents('tr').remove();  
});