Как удалить каждую третью строку из <tbody>, используя только JavaScript?

Я хочу удалить каждую третью строку в этом коде. Как я могу это сделать? Спасибо за любые ответы

Я пытался сделать что-то вроде этого:

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?

— 28.05.2019 15:19

использование класса или идентификатора для идентификации trs для удаления было бы лучшей идеей, и его было бы проще использовать с селектором css

— 28.05.2019 15:27

@PanosK, использование :nth-child() сделает эту работу без необходимости изменять HTML.

— 28.05.2019 16:21

javascript html

28.05.2019 15:17

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

437

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Проблема в том, что как только вы удаляете строку из своей таблицы, свойство таблицы ряды.длина уменьшается на 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>

О, действительно все работает отлично! Спасибо, хорошего дня!

— 28.05.2019 15:26

28.05.2019 15:24

Используйте Массив.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, чтобы сделать то же самое.

[...document.querySelectorAll('#mytable tr')].forEach((el, i) => {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>

28.05.2019 15:25

Ответ принят как подходящий

Вы можете попробовать следующий способ:

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>

По какой причине вы решили не использовать .forEach() из NodeList, возвращенного из .querySelectorAll()?

— 28.05.2019 15:36

@RandyCasburn, такой причины нет, я просто хотел придерживаться кода OP ...... спасибо :)

— 28.05.2019 15:42

28.05.2019 15:28