如何仅使用 JavaScript 从 <tbody> 中删除第三行？ [复制]答案

【问题标题】：How to delete each third row from <tbody> using only JavaScript? [duplicate]如何仅使用 JavaScript 从 <tbody> 中删除第三行？ [复制]
【发布时间】：2019-05-29 21:45:13
【问题描述】：

我想删除这段代码中的第三行。我怎么能做到这一点？感谢您的任何回答

我试图做这样的事情：

const table = document.getElementById('myTable');

for (let i =0; i <table.rows.length; i++) {
  if (i%3 === 0 ) {
    table.deleteRow(i)
  }
}

我有这张桌子：

        <tbody>
            <tr>
                <td>First row.</td>
            </tr>
            <tr>
                <td>Second row.</td>
            </tr>
          <tr>
                <td>DELETE 3</td>
            </tr>
          <tr>
                <td>4 row.</td>
            </tr>
          <tr>
                <td>5 row.</td>
            </tr>
          <tr>
                <td>DELETE 6</td>
            </tr>
          <tr>
                <td>First row.</td>
            </tr>
            <tr>
                <td>Second row.</td>
            </tr>
          <tr>
                <td>DELETE 9</td>
            </tr>
        </tbody>

我需要一个脚本，将其放入浏览器的控制台中，然后删除任何表格中的每三行。谢谢！

【问题讨论】：

你的 javascript 代码有什么问题？
使用类或 id 来识别要删除的 trs 会是一个更好的主意，并且更容易与 css 选择器一起使用
@PanosK，使用 :nth-child() 可以完成这项工作，而无需修改 HTML。

标签： javascript html

【解决方案1】：

问题在于，一旦您从表中删除一行，表的 rows.length 属性就会减少 1，并且行的顺序也会发生变化。（因此在移除后，接下来的三分之一将是与移除前不同的元素）

更好地迭代从最后一个到第一个的元素，例如：

var myTable = document.getElementById("myTable");
for (var a = myTable.rows.length - 1; a > 0; a--) {
  if ((a + 1) % 3 === 0) {
    myTable.deleteRow(a)
  }
}

<table id="myTable">

  <tbody>
    <tr>
      <td>First row.</td>
    </tr>
    <tr>
      <td>Second row.</td>
    </tr>
    <tr>
      <td>DELETE 3</td>
    </tr>
    <tr>
      <td>4 row.</td>
    </tr>
    <tr>
      <td>5 row.</td>
    </tr>
    <tr>
      <td>DELETE 6</td>
    </tr>
    <tr>
      <td>First row.</td>
    </tr>
    <tr>
      <td>Second row.</td>
    </tr>
    <tr>
      <td>DELETE 9</td>
    </tr>
  </tbody>
</table>

【讨论】：

哦，真的一切正常！谢谢你，祝你有美好的一天！

【解决方案2】：

您可以尝试以下方法：

var table = document.querySelectorAll('tbody tr');

for (let i =0; i <table.length; i++) {
  if(i%3==2)
    table[i].remove();
}

<table>
  <tbody>
    <tr>
        <td>First row.</td>
    </tr>
    <tr>
        <td>Second row.</td>
    </tr>
    <tr>
        <td>DELETE 3</td>
    </tr>
    <tr>
        <td>4 row.</td>
    </tr>
    <tr>
        <td>5 row.</td>
    </tr>
    <tr>
        <td>DELETE 6</td>
    </tr>
    <tr>
        <td>First row.</td>
    </tr>
    <tr>
        <td>Second row.</td>
    </tr>
    <tr>
        <td>DELETE 9</td>
    </tr>
  </tbody>
</table>

【讨论】：

您选择不使用从.querySelectorAll() 返回的NodeList 中的.forEach() 的任何原因？
@RandyCasburn，没有这个原因，我只是想坚持使用 OP 的代码......谢谢:)

【解决方案3】：

使用Array.forEach 遍历所有行的选择。

const tableRows = document.querySelectorAll("#mytable tr")

Array.from(tableRows).forEach((row, i) => {
  if ((i + 1) % 3 === 0) {
    row.parentNode.removeChild(row); 
  }
})

<table id="mytable">
  <tbody>
    <tr>
      <td>1 row.</td>
    </tr>
    <tr>
      <td>2 row.</td>
    </tr>
    <tr>
      <td>DELETE 3</td>
    </tr>
    <tr>
      <td>4 row.</td>
    </tr>
    <tr>
      <td>5 row.</td>
    </tr>
    <tr>
      <td>DELETE 6</td>
    </tr>
    <tr>
      <td>7 row.</td>
    </tr>
    <tr>
      <td>8 row.</td>
    </tr>
    <tr>
      <td>DELETE 9</td>
    </tr>
  </tbody>
</table>

或者使用 ECMAScript 2015 的 spread syntax 做同样的事情

[...document.querySelectorAll('#mytable tr')].forEach((el, i) =&gt; {if (i % 3 === 2) {el.remove()}});

<table id="mytable">
  <tbody>
    <tr>
      <td>1 row.</td>
    </tr>
    <tr>
      <td>2 row.</td>
    </tr>
    <tr>
      <td>DELETE 3</td>
    </tr>
    <tr>
      <td>4 row.</td>
    </tr>
    <tr>
      <td>5 row.</td>
    </tr>
    <tr>
      <td>DELETE 6</td>
    </tr>
    <tr>
      <td>7 row.</td>
    </tr>
    <tr>
      <td>8 row.</td>
    </tr>
    <tr>
      <td>DELETE 9</td>
    </tr>
  </tbody>
</table>

【讨论】：