从表中添加/删除行

IT技术 javascript html-table
2021-03-07 22:29:27

我有一张包含一些家属信息的表格，每一行都有一个添加和删除按钮来添加/删除其他家属。当我点击“添加”按钮时，一个新行被添加到表格中，但是当我点击“删除”按钮时，它首先删除标题行，然后在随后的点击中删除相应的行。

这是我所拥有的：

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>
6个回答

有一些修改的 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>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
row.parentNode.remove(row); 应该变成 row.parentNode.removeChild(row);
2021-04-20 22:29:27
jQuery 有一个很好的功能，可以选择最接近的元素进行删除。它节省了对父选择进行硬编码的需要。
2021-04-24 22:29:27
@lostsource，已修复！谢谢！
2021-04-28 22:29:27
+1 承认这一点。但是无论如何您都不应该托管该文件。您应该使用 Google 的 CDN 来托管它。我敢打赌，绝大多数浏览 Internet 的人已经在他们的计算机上从其他站点（如果不是来自 Google）安装了它。
2021-05-10 22:29:27
也是如此，但 jQuery 是额外的 32K 代码，甚至被压缩和 gzipped。
2021-05-18 22:29:27

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

在最近的（）函数很酷，因为它会“获得通过自身测试元素，并通过其祖先向上遍历选择相匹配的第一个元素。”

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

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

close() 现在是原生 JavaScript 函数
2021-05-01 22:29:27
除了用于控制行删除之外，jquery 还可以帮助绑定您的行操作，这样您就没有突兀的 js 调用，而是可以在您的按钮上使用它class ="addDep"（注意：id 不能多次使用），然后在js 做 $('.addDep').on('click',add);和$('.deleteDep').on('click', deleteRow);
2021-05-03 22:29:27

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

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

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

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

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

<table>
   <thead>
      <th>Header1</th>
      ......
   </thead>
   <tbody>
       <tr><td>Content1</td>....</tr>
       ......
   </tbody>
</table>
在发布这样的答案之前，您可能需要检查自己的代码是否有错误。你不能在里面放置任何数据<tr></tr>。结果通常是数据最终显示在<table>.
2021-05-03 22:29:27
@Perplexor 是的，是的，这是一个愚蠢的语法错误。坐在扶手椅上很容易批评。
2021-05-12 22:29:27

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

其它你可能感兴趣的问题
上一篇当用户滚动经过页面的某个部分时 jQuery 触发动作 下一篇滚动时的 JavaScript 调整大小事件 - 移动