Question

我有一些带有一些依赖信息的表，并且每行都有一个添加和删除按钮来添加/删除其他依赖项。当我单击“添加”按钮时，会在表中添加一个新行，但是当我单击“删除”按钮时，它会首先删除标题行，然后在后续单击时删除相应的行。

这就是我所拥有的：

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>

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

Answer 2

jQuery对removing elements from the DOM有很好的功能。

closest() function很酷，因为它会“通过测试元素本身并遍历其祖先来获取与选择器匹配的第一个元素。”

$(this).closest("tr").remove();

每个删除按钮都可以通过函数调用运行非常简洁的代码。

Answer 3

这是使用jQuery的代码JS Bin。在所有浏览器上测试过。在这里，我们必须单击行以删除它，效果很好。希望它有所帮助。

Answer 4

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

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" class="addDep" value="Add"/></td>
     <td> <input type="button" class="deleteDep" value="Delete"/></td>
  </tr>
   <tr>
     <td> Child </td>
     <td> 2008-23-06 </td>
     <td> female </td>
     <td> <input type="button" class="addDep" value="Add"/></td>
     <td> <input type="button" class="deleteDep" value="Delete"/></td>
  </tr>
</table>

的javascript：

$('body').on('click', 'input.deleteDep', function() {
   $(this).parents('tr').remove();  
});

请记住，您需要引用jQuery：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

这是一个有效的jsfiddle示例： http://jsfiddle.net/p9dey/1/

Answer 5

我会先尝试正确格式化你的表格，如下所示：

我不禁想到格式化表格至少不会造成任何伤害。

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

Answer 6

您好我会做这样的事情：

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>

另外，如果你想要，你可以创建一个循环来构建表。因此构建表格很容易。与编辑相同：）

Answer 7

很多好的答案，但这里还有一个;）

您可以将点击的处理程序添加到表格

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

然后找出事件的目标是什么

function tableclick(e) {
    if(!e)
     e = window.event;

    if(e.target.value == "Delete")
       deleteRow( e.target.parentNode.parentNode.rowIndex );
}

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

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

以下是工作代码：http://jsfiddle.net/hX4f4/2/

从表中添加/删除行

7 个答案: