使用 javascript 从 html-table 中删除元素
Removing elements from html-table using javascript
我正在尝试使用 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 中留下包含这两个字符串之一的元素。我检查了数组中保存的位置,都是正确的。
.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>
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 中删除某些元素。更具体地说,我需要删除所有不包含两个子字符串的节点。
我试过把不包含这两个子串的节点的位置保存下来,然后去掉。
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 中留下包含这两个字符串之一的元素。我检查了数组中保存的位置,都是正确的。
.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>
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>