HTML 找到并停止显示 table child
HTML finding and stop displaying table child
我已经这样做了:
<table id="tabla">
<tbody>
<tr><th>row1</th><td>w</td></tr>
<tr><th>row2</th><td>x</td></tr>
</tbody>
<tbody>
<tr><th>row1</th><td>y</td></tr>
<tr><th>row2</th><td>z</td></tr>
</tbody>
</table>
<script type="text/javascript">
function iterate() {
var table = document.getElementById("tabla").children;
for (b=0; b<table.length(); b++) {
var cells = table[b].children;
if(cells[0].innerHtml == "row1") {
if(cells[1].innerHtml == "w") {
table[b].style.display="none";
}
}
}
}
</script>
我的目的是找到table中所有满足条件的children并停止显示它们。
我的代码不工作,我不知道为什么。
有人知道吗?
function iterate() {
var table = document.getElementById("tabla").children;
for (b=0; b<table.length; b++) {
var cells = table[b].children;
if(cells[0].children[0].innerHTML == "row1") {
if(cells[0].children[1].innerHTML == "w") {
table[b].style.display="none";
}
}
}
}
iterate();
*{
background-color:pink;
}
<table id="tabla">
<tbody>
<tr><th>row1</th><td>w</td></tr>
<tr><th>row2</th><td>x</td></tr>
</tbody>
<tbody>
<tr><th>row1</th><td>y</td></tr>
<tr><th>row2</th><td>z</td></tr>
</tbody>
</table>
- 您的
table
元素的子元素是 tbody
- 没有
length()
函数,它是一个属性(只用length
)
- 没有
innerHtml
,你应该用innerHTML
- 你指的
cells[0]
实际上是行(而不是单元格)所以它是 innerHTML == <th>row1</th><td>w</td>
这是对您的代码的修复:
function iterate() {
var table = document.getElementById("tabla").children;
for (b=0; b<table.length; b++) {
var rows = table[b].children;
for (r=0; r<rows.length;r++) {
var cells = rows[r].children
if (cells[0].innerHTML == "row1") {
if (cells[1].innerHTML == "w") {
table[b].style.display="none";
}
}
}
}
}
iterate();
<table id="tabla">
<tbody>
<tr><th>row1</th><td>w</td></tr>
<tr><th>row2</th><td>x</td></tr>
</tbody>
<tbody>
<tr><th>row1</th><td>y</td></tr>
<tr><th>row2</th><td>z</td></tr>
</tbody>
</table>
我是这样解决的:
var table = document.getElementById("tabla").children;
for (b=0; b<table.length; b++) {
var rows = table[b].children;
var cells = rows[0].children;
if (cells[0].innerHTML == "row1") {
if (cells[1].innerHTML != "x") {
table[b].style.display="none";
} else {
table[b].style.display="block";
}
}
}
我不会遍历每个 tbody 的所有元素,因为我只对第一个元素感兴趣。
我已经这样做了:
<table id="tabla">
<tbody>
<tr><th>row1</th><td>w</td></tr>
<tr><th>row2</th><td>x</td></tr>
</tbody>
<tbody>
<tr><th>row1</th><td>y</td></tr>
<tr><th>row2</th><td>z</td></tr>
</tbody>
</table>
<script type="text/javascript">
function iterate() {
var table = document.getElementById("tabla").children;
for (b=0; b<table.length(); b++) {
var cells = table[b].children;
if(cells[0].innerHtml == "row1") {
if(cells[1].innerHtml == "w") {
table[b].style.display="none";
}
}
}
}
</script>
我的目的是找到table中所有满足条件的children并停止显示它们。
我的代码不工作,我不知道为什么。
有人知道吗?
function iterate() {
var table = document.getElementById("tabla").children;
for (b=0; b<table.length; b++) {
var cells = table[b].children;
if(cells[0].children[0].innerHTML == "row1") {
if(cells[0].children[1].innerHTML == "w") {
table[b].style.display="none";
}
}
}
}
iterate();
*{
background-color:pink;
}
<table id="tabla">
<tbody>
<tr><th>row1</th><td>w</td></tr>
<tr><th>row2</th><td>x</td></tr>
</tbody>
<tbody>
<tr><th>row1</th><td>y</td></tr>
<tr><th>row2</th><td>z</td></tr>
</tbody>
</table>
- 您的
table
元素的子元素是tbody
- 没有
length()
函数,它是一个属性(只用length
) - 没有
innerHtml
,你应该用innerHTML
- 你指的
cells[0]
实际上是行(而不是单元格)所以它是 innerHTML ==<th>row1</th><td>w</td>
这是对您的代码的修复:
function iterate() {
var table = document.getElementById("tabla").children;
for (b=0; b<table.length; b++) {
var rows = table[b].children;
for (r=0; r<rows.length;r++) {
var cells = rows[r].children
if (cells[0].innerHTML == "row1") {
if (cells[1].innerHTML == "w") {
table[b].style.display="none";
}
}
}
}
}
iterate();
<table id="tabla">
<tbody>
<tr><th>row1</th><td>w</td></tr>
<tr><th>row2</th><td>x</td></tr>
</tbody>
<tbody>
<tr><th>row1</th><td>y</td></tr>
<tr><th>row2</th><td>z</td></tr>
</tbody>
</table>
我是这样解决的:
var table = document.getElementById("tabla").children;
for (b=0; b<table.length; b++) {
var rows = table[b].children;
var cells = rows[0].children;
if (cells[0].innerHTML == "row1") {
if (cells[1].innerHTML != "x") {
table[b].style.display="none";
} else {
table[b].style.display="block";
}
}
}
我不会遍历每个 tbody 的所有元素,因为我只对第一个元素感兴趣。