Удаление элементов из html-таблицы с использованием javascript - PullRequest
Новая
       11

Удаление элементов из html-таблицы с использованием javascript

0 голосов
/ 03 февраля 2019

Я пытаюсь удалить определенные элементы из html-таблицы, используя javascript.Более конкретно мне нужно удалить все узлы, которые не содержат две подстроки.

Я попытался сохранить позиции узлов, которые не содержат эти две подстроки, а затем удалить их. 

var posToRemove = [];
var tbody = document.getElementsByTagName("tbody")[0];
var trTags = tbody.getElementsByTagName("tr");
var substring0 = "Foo";
var substring1 = "Bar";

for (i = 0; i < trTags.length; i++) {
  var trTextContent = trTags[i].textContent;
  if (trTextContent.indexOf(substring0) !== -1 || trTextContent.indexOf(substring1) !== -1) {
    //do something
  } else {
    posToRemove.push(i);
  }
}

for (i = 0; i < posToRemove.length; i++) {
  trTags[posToRemove[i]].remove();
}
<table>
  <tbody>
    <tr>
      <td><a href="https://example.org">Foo</a></td>
      <td>Description</td>
      <td>2019</td>
    </tr>
    <tr>
      <td><a href="https://example.org">Test</a></td>
      <td>Description</td>
      <td>2018</td>
    </tr>
    <tr>
      <td>Bar</td>
      <td>Description</td>
      <td>2017</td>
    </tr>
    <tr>
      <td><a href="https://example.org">Foo</a></td>
      <td>Description</td>
      <td>2019</td>
    </tr>
    <tr>
      <td><a href="https://example.org">Test</a></td>
      <td>Description</td>
      <td>2018</td>
    </tr>
    <tr>
      <td>Bar</td>
      <td>Description</td>
      <td>2017</td>
    </tr>
    <tr>
      <td>Bar</td>
      <td>Description</td>
      <td>2017</td>
    </tr>
    <tr>
      <td>Bar</td>
      <td>Description</td>
      <td>2017</td>
    </tr>
    <tr>
      <td><a href="https://example.org">Foo</a></td>
      <td>Description</td>
      <td>2019</td>
    </tr>
    <tr>
      <td><a href="https://example.org">Foo</a></td>
      <td>Description</td>
      <td>2019</td>
    </tr>
    <tr>
      <td><a href="https://example.org">Test</a></td>
      <td>Description</td>
      <td>2018</td>
    </tr>
  </tbody>
</table>

К сожалению, не работает, как ожидалось.Он не оставляет в таблице только элементы, которые содержат одну из этих двух строк.Я проверил позиции, сохраненные в массиве, и все правильно.

Ответы [ 2 ]

0 голосов
/ 03 февраля 2019

row.textContent.search(RegEx)

  1. Соберите всю таблицу с помощью .rows HTMLCollection и преобразуйте ее в массив. 

    const T = document.querySelector('table');
const R = Array.from(T.rows);

  2. Запустите .forEach() на массиве и в начале каждой итерации строки получите .textContent. 

    R.forEach((row, idx) => {
  const str = row.textContent;
  ...

  3. Затем создайте регулярное выражение для использования с .search() методом.поиск строки из предыдущего шага.Регулярное выражение - это простой буквальный поиск для чередования Foo: от | до Bar.Результатом поиска будет индекс найденной подстроки или -1, если ничего не было найдено. 

    const rgx = /Foo|Bar/;
const i = str.search(rgx); 
...

  4. Если результат равен -1, мымы знаем, что эту строку следует удалить, и мы делаем это, используя свойство .parentElement и метод .removeChild(). 

    if (i === -1) {
 row.parentElement.removeChild(row);
}...

Демо 

const T = document.querySelector('table');
const R = Array.from(T.rows);

R.forEach((row, idx) => {
  const str = row.textContent;
  const rgx = /Foo|Bar/;
  const i = str.search(rgx);
  if (i === -1) {
    row.parentElement.removeChild(row);
  }
});
<table>
  <tbody>
  <tr>
    <td><a href="https://example.org">Foo</a></td>
    <td>Description</td>
    <td>2019</td>
  </tr>
  <tr>
    <td><a href="https://example.org">Test</a></td>
    <td>Description</td>
    <td>2018</td>
  </tr>
  <tr>
    <td>Bar</td>
    <td>Description</td>
    <td>2017</td>
  </tr>
  <tr>
    <td><a href="https://example.org">Foo</a></td>
    <td>Description</td>
    <td>2019</td>
  </tr>
  <tr>
    <td><a href="https://example.org">Test</a></td>
    <td>Description</td>
    <td>2018</td>
  </tr>
  <tr>
    <td>Bar</td>
    <td>Description</td>
    <td>2017</td>
  </tr>
  <tr>
    <td>Bar</td>
    <td>Description</td>
    <td>2017</td>
  </tr>
  <tr>
    <td>Bar</td>
    <td>Description</td>
    <td>2017</td>
  </tr>
  <tr>
    <td><a href="https://example.org">Foo</a></td>
    <td>Description</td>
    <td>2019</td>
  </tr>
  <tr>
    <td><a href="https://example.org">Foo</a></td>
    <td>Description</td>
    <td>2019</td>
  </tr>
  <tr>
    <td><a href="https://example.org">Test</a></td>
    <td>Description</td>
    <td>2018</td>
  </tr>
  </tbody>
</table>
0 голосов
/ 03 февраля 2019

.push() для элемента posToRemove вместо i и замены posToRemove[i].remove() для trTags[i].remove().Кроме того, первый символ каждой строки должен быть прописным, а не строчным, чтобы соответствовать "Foo" и "Bar". 

var posToRemove = [];
var tbody = document.getElementsByTagName("tbody")[0];
var trTags = tbody.getElementsByTagName("tr");
var substring0 = "Foo";
var substring1 = "Bar";

for (let i = 0; i < trTags.length; i++) {
  var trTextContent = trTags[i].textContent;
  if (trTextContent.indexOf(substring0) !== -1 || trTextContent.indexOf(substring1) !== -1) {
    //do something
  } else {
    posToRemove.push(trTags[i]);
  }
}

for (let i = 0; i < posToRemove.length; i++) {
  posToRemove[i].remove();
}
<table>
<tbody>
<tr>
  <td><a href="https://example.org">Foo</a></td>
  <td>Description</td>
  <td>2019</td>
</tr>
<tr>
  <td><a href="https://example.org">Test</a></td>
  <td>Description</td>
  <td>2018</td>
</tr>
<tr>
  <td>Bar</td>
  <td>Description</td>
  <td>2017</td>
</tr>
</tbody>
</table>
...