javascript - 从表中添加/删除行

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>

score 60 · Accepted Answer

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>

score 10 · Accepted Answer

jQuery 有一个很好的功能，可以从 DOM 中删除元素。

最近的() 函数很酷，因为它将“通过测试元素本身并向上遍历其祖先来获取与选择器匹配的第一个元素”。

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

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

score 1 · Accepted Answer

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

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

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

</p>

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

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

这是使用 jQuery的代码JS Bin 。在所有浏览器上测试。在这里，我们必须单击行才能以美观的效果将其删除。希望能帮助到你。

score 0 · Accepted Answer

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

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/

score 0 · Accepted Answer

使用以下代码删除表的特定行

   <td>
 <asp:ImageButton ID="imgDeleteAction" runat="server" ImageUrl="~/Images/trash.png"  OnClientClick="DeleteRow(this);return false;"/>
 </td>
function DeleteRow(element) {
        document.getElementById("tableID").deleteRow(element.parentNode.parentNode.rowIndex);
          
    }

score -1 · Accepted Answer

嗨，我会做这样的事情：

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>

此外，如果您愿意，您可以创建一个循环来构建表格。所以建表会很容易。你可以用编辑做同样的事情:)

javascript - 从表中添加/删除行

8 回答 8

Related

Reference