1

セルの1つに特定のスパン要素を含む行を非表示にしようとしています。次のコードは私がこれまでに持っているものです-しかし、trのgetElementsByTagNameはありません

行を取得するために他に何ができますか？ありがとう ！

<table id='tableContainer'>
<tr><td><span id='xyz'>Hide</span></td></tr>
<tr><td><span id='abc'>Show</span></td></tr>
</table>

container = document.getElementById('tableContainer');
items = container.getElementsByTagName('tr');

for (var j = 0; j < items.length; j++) {
    spans = items.getElementsByTagName('span');
    for (var i=0; i<spans.length; i++) {
        if (spans.id == 'xyz') {
            items.display = 'none';
        }
    }
}
4

2 に答える 2

1

spansとitemsはノードの配列であるため、配列インデックスでそれぞれを取得するのを忘れた場合は、次のようになります。

<table id='tableContainer'>
<tr><td><span id='xyz'>Hide</span></td></tr>
<tr><td><span id='abc'>Show</span></td></tr>
</table>

container = document.getElementById('tableContainer');
items = container.getElementsByTagName('tr');

for (var j = 0; j < items.length; j++) {
    spans = items[j].getElementsByTagName('span');
    for (var i=0; i<spans.length; i++) {
        if (spans[i].id == 'xyz') {
            items[j].style.display = 'none';
        }
    }
}

デモ

アップデート：

styleそして、前に置くことを忘れないでくださいdisplay。

items[j].display = 'none'; // false
items[j].style.display = 'none'; // true
于 2012-04-19T12:34:08.890 に答える
1

では、少しデバッグしてみましょう。

container = document.getElementById('tableContainer');
console.log(container)  //<-- Gives you tag element
items = container.getElementsByTagName('tr');
console.log(items); //<-- Gives you HTML Collection

for (var j = 0; j < items.length; j++) {
    spans = items.getElementsByTagName('span');  //<-- error says items.getElementsByTagName is not a function
    for (var i=0; i<spans.length; i++) {
        if (spans.id == 'xyz') {  //<--error here [not referencing index]
            items.display = 'none';  //<--error here [not setting style and index]
        }
    }
}

ここでの問題は、各trにインデックスを付けていないことです。これは、htmlコレクション全体で実行しようとしています。

spans = items.getElementsByTagName('span');

する必要があります

spans = items[j].getElementsByTagName('span');

最終的なコードが次のようになるように、スパンループで同じことを行う必要があります

container = document.getElementById('tableContainer');
console.log(container)  //<-- Gives you tag element
items = container.getElementsByTagName('tr');
console.log(items); //<-- Gives you HTML Collection

for (var j = 0; j < items.length; j++) {
    spans = items[j].getElementsByTagName('span');  //<-- use index
    items.getElementsByTagName is not a function
    for (var i=0; i<spans.length; i++) {
        console.log(spans[i].id)
        if (spans[i].id == 'xyz') {  //<-- use index
            items[j].style.display = 'none';  //<-- use index and display
        }
    }
}

実行例：JSFiddle

于 2012-04-19T12:35:17.483 に答える