使用 javascript 从 html-table 中删除元素

Question

我正在尝试使用 javascript 从 html-table 中删除某些元素。更具体地说，我需要删除所有不包含两个子字符串的节点。

我试过把不包含这两个子串的节点的位置保存下来，然后去掉。

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>

遗憾的是没有像预期的那样工作。它不会只在 table 中留下包含这两个字符串之一的元素。我检查了数组中保存的位置，都是正确的。

Answer 1

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

Answer 2

`row.textContent.search(RegEx`)

用.rows HTMLCollection收集所有table并转换成数组。

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

运行 .forEach() 在数组上并在一行的每次迭代开始时，获取 .textContent.
```
R.forEach((row, idx) => {
  const str = row.textContent;
  ...
```
接下来制作一个与 .search() 方法一起使用的正则表达式。搜索上一步中的字符串。正则表达式是对 Foo 交替的简单文字搜索：| 到 Bar。搜索结果将是找到的子字符串的索引，如果没有找到则为 -1。
```
const rgx = /Foo|Bar/;
const i = str.search(rgx); 
...
```
如果结果是 -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>

使用 javascript 从 html-table 中删除元素

Removing elements from html-table using javascript

javascript

html

html-table

iteration

removechild

`row.textContent.search(RegEx`)

演示

使用 javascript 从 html-table 中删除元素

Removing elements from html-table using javascript

javascript

html

html-table

iteration

removechild

row.textContent.search(RegEx)

演示

`row.textContent.search(RegEx`)