js 删除表格行

在 JavaScript 中删除表格行，可以使用多种方法，以下介绍两种常见的操作方式：

一、使用 deleteRow() 方法

deleteRow() 是 HTMLTableElement 对象（即 <table> 元素）的一个方法，用于删除表格中的一行。可以通过指定要删除的行的索引来执行此操作。

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>删除表格行示例</title>
</head>

<body>
  <table id="myTable" border="1">
    <tr>
      <td>行1</td>
    </tr>
    <tr>
      <td>行2</td>
    </tr>
    <tr>
      <td>行3</td>
    </tr>
  </table>
  <button onclick="deleteRowFunction()">删除第二行</button>

  <script>
    function deleteRowFunction() {
      var table = document.getElementById("myTable");
      // 索引从0开始，这里删除第二行（索引为1）
      table.deleteRow(1);
    }
  </script>
</body>

</html>

在上述示例中，当点击按钮时，会调用 deleteRowFunction 函数，该函数获取到表格元素，然后使用 deleteRow(1) 删除了第二行（因为索引从 0 开始）。

二、通过操作 DOM 移除 <tr> 元素

可以直接获取到要删除的 <tr> 元素，然后通过修改其父元素的 innerHTML 或使用 removeChild() 方法来删除该行。

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>删除表格行示例</title>
</head>

<body>
  <table id="myTable" border="1">
    <tr>
      <td>行1</td>
    </tr>
    <tr id="rowToDelete">
      <td>行2</td>
    </tr>
    <tr>
      <td>行3</td>
    </tr>
  </table>
  <button onclick="deleteRowByDOM()">删除指定行</button>

  <script>
    function deleteRowByDOM() {
      var row = document.getElementById("rowToDelete");
      row.parentNode.removeChild(row);
    }
  </script>
</body>

</html>

在这个示例中，点击按钮会调用 deleteRowByDOM 函数，该函数先获取到具有特定 id 的 <tr> 元素，然后通过其父节点调用 removeChild() 方法将该行删除。

优势：

操作简单直观，易于实现。
可以灵活地根据不同的条件删除特定的行。

应用场景：

动态更新表格数据，例如根据用户的操作删除不需要的数据行。
在数据筛选或排序过程中，移除不符合条件的行。

可能出现的问题及解决方法：

删除行后索引混乱：如果后续还有基于索引的操作，需要注意索引的变化，或者重新整理数据结构。
误删行：确保删除操作是在正确的条件和逻辑下执行，可以通过添加确认提示等方式避免误操作。

希望以上内容能满足您的需求，如有其他疑问，请随时提问。

页面内容是否对你有帮助？

有帮助

没帮助

元素或页面构建器插件，没有加载所有的方式？

、

我的日志显示了一些错误：JS: 2019-04-21 07:04:21 [error X 7][https://www.watsonwebsolutions.com/wp-content/plugins/elementor/assets/js/editor.min.js?ver=2.5.14:2:83475] Cannot set property \'controls\' of un

浏览 0提问于2019-07-31得票数 0

1回答

如何从谷歌电子表格中删除行？

、、

如何从google电子表格中删除行我正在谷歌电子表格与node.js工作，我能够读，写，更新扩展表，但需要一个删除特定行的代码。

浏览 4提问于2017-09-07得票数 2

回答已采纳

1回答

JQuery突出显示表格行

、

我有一个表格行，在我的html中有class='highlightedrows‘ $(".highlightedrows").effect("highlight", {}, 1500);但是这给了我一个javascript错误‘对象不支持这个属性或方法’代码0在例如6忽略我不想正确导入文件

浏览 2提问于2011-01-26得票数 0

回答已采纳

1回答

使用jquery从多个表中删除相关数据

、、

针对Name表上的emp名称提供了删除按钮。当按下remove按钮时，它会从所有三个表中删除显示的employees记录，我应该怎么做？通过循环雇员列表来在每次删除操作时重新呈现所有表是显而易见的选择，但是有没有更有效的方法来做到这一点呢？

浏览 0提问于2015-06-03得票数 0

2回答

注册后自定义重定向-没有错误，但页不重定向。

、

get 'paypal_confirmation', to: 'static_pages#paypal_confirmation' endProcessing by StaticPagesController#paypal_confirmation as JS

浏览 2提问于2014-08-13得票数 0

回答已采纳

1回答

从表格中删除一行(HTML/JS)

、

标题不言自明；我正在尝试为表的每一行添加一个删除按钮，但现在它删除的是表头而不是实际的行。这是Javascript；有什么建议吗？

浏览 25提问于2020-07-27得票数 0

1回答

表格使用HTML、CSS、JS添加行、编辑行、保存行、删除行

、、、、

表格添加行，编辑行，保存行，删除都很好，但是当我删除的时候，sr不需要像1，2，3，4那样重新排列。有时表格结构也会中断。有谁可以帮我？? border-box;} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

浏览 32提问于2020-10-05得票数 2

回答已采纳

2回答

如果元素为空且带有JS，则移除css类

、、、

每个表格有3行(标题/图像/源)。我需要使用CSS设置标题的样式，使其具有边框，但是当标题为空时，标题类仍然会出现在我的标记中，导致出现随机的边框。/></td> <tr> </tr>没有标题的表格，表格单元格中仍有c

浏览 20提问于2018-08-28得票数 0

回答已采纳

1回答

VSTO Excel:检测删除的ListObject的最后一行

、、

因此，我正在处理一个VSTO Excel应用程序，需要检测用户何时删除了ListObject。;删除最后一行时，不会触发ListObject.Change事件！有没有一种方法可以从工作表中检测到ListObject最后一行被删除，或者ListObject本身被删除？

浏览 1提问于2013-03-28得票数 1

2回答

表格行的上边框和下边框

、

我想在表格中的行的上边框和下边框上使用不同的颜色。如果我使用display: block，Chrome将会正确地渲染它，但我不知道这是否是正确的方法。但是，我想让它在IE8中工作，我不知道怎么做。

浏览 2提问于2013-01-28得票数 1

3回答

VBA Excel删除表行并上移，而不是整行

、、

我的情况就像这张图片：如何只删除表示为红色的单元格，并将下面的单元格上移？谢谢 Jeevan

浏览 5提问于2016-06-30得票数 1

2回答

表单操作属性不使用js脚本

、、

HTML： .......Register </button> Javascript (validation.js

浏览 3提问于2022-03-22得票数 0

回答已采纳

1回答

"this“对象在js.erb on Rails 3中工作吗？

、、、

我的表格中有很多行，每行都包含一个按钮。单击按钮时，它会将远程js发送到控制器中的我的方法。它应该删除按钮所在的行。 respond_to do |format| format.js# format.js { render :action => 'add_to_cart'}我把下面的代码放在我

浏览 0提问于2013-11-08得票数 0

2回答

如何将JavaScript添加到页面中？

我只是在hook_menu()中放置了类似于以下代码的代码： drupal_add_js(drupal_get_path('module''/abc.js');可以吗？

浏览 0提问于2012-05-19得票数 1

回答已采纳

2回答

防止HTML代码被盗

、

我正在向我的客户展示PSD到HTML的演示。我想在我的服务器上上传带有CSS文件和图像的HTML文档，以便向客户端显示演示。有没有办法对html代码进行解码/编码，使得它不能被复制？

浏览 2提问于2013-05-12得票数 4

回答已采纳

1回答

如何在JS绘制的表格上点击按钮删除行

、、

这是JS代码 var data = [ "id": "qc1111", <title>Quiz Index</title><script src="assets/javascript/quizList.<

浏览 2提问于2017-02-26得票数 1

1回答

如何删除一张表的所有行？

、

我需要在现有的mib和代理代码中添加删除表中所有行的功能(即清除表中的内容)。我知道如何删除单行(使用rowstatus "destroy")，但如何一次性删除所有行？

浏览 4提问于2014-07-15得票数 1

3回答

Javascript删除html表格行

、

我动态地创建了一个html表格，每行中的一个单元格存储了一个按钮，当按下该按钮时，我想删除该行。要知道要从按下的delete按钮中删除哪些表行，我有哪些选择？我能以某种方式得到按钮所在的行吗？也许在单击内部，我可以使用事件'this‘属性来获取按钮，然后找出它在哪个单元格中，以及从那里该单元格在哪一行？不过，我不确定我该怎么做。

浏览 2提问于2012-11-29得票数 0

回答已采纳

6回答