苦苦挣扎，根据特定列的值隐藏一行（理论上应该很容易......）

Question

什么应该是一个非常简单的问题让我停留了几天，并且按照惯例，虽然有很多类似的问题，但没有完全匹配（可能因为我使用元素来创建表，而不是） 。

简而言之，我有一个按钮，点击它时会向下面的函数发送市场ID（这可以正常工作以避免怀疑）。

我们的想法是，该函数会在Market Id列中隐藏所有没有此市场ID的表行。很简单！

但是，出于某种原因，我似乎无法做到这一点，因为我经常遇到类型错误。

我已经尝试找到子节点并尝试派生父节点，也反过来，但到目前为止没有运气。

我没有必要使用这种方法，只要我可以隐藏所有不包含市场ID的行，当它传递给函数时，那就没问题了。

但是，我没有想法，所以任何帮助都表示赞赏！

我尝试了多种方法（例如parentNode，childNode，children等），但是我总是遇到类似的错误。

这是HTML：

<div class="divTable blueTable" id="bluetable">
<div class="divTableHeading" id="blue_table_head">
<div class="divTableRow" id="header_row">
<div class="divTableHead">Selection Name</div>
<div class="divTableHead">Selection ID</div>
<div class="divTableHead">Market ID</div>
</div>
</div>
<div class="divTableBody" id="blue_table_body">
<div class="divTableRow" id="blue_table_row_0">
<div class="divTableCell"><div>Selection A</div></div>
<div class="divTableCell"><div>1136035</div></div>
<div class="divTableCell"><div class="1.15">1.15</div></div>
</div>
<div class="divTableRow" id="blue_table_row_1">
<div class="divTableCell"><div>Selection B</div></div>
<div class="divTableCell"><div>11148977</div></div>
<div class="divTableCell"><div class="1.15">1.15</div></div>
</div>
<div class="divTableRow" id="blue_table_row_2">
<div class="divTableCell"><div>Selection C</div></div>
<div class="divTableCell"><div>4519440</div></div>
<div class="divTableCell"><div class="1.15">1.15</div></div>
</div>
<div class="divTableRow" id="blue_table_row_3">
<div class="divTableCell"><div>Selection D</div></div>
<div class="divTableCell"><div>10974022</div></div>
<div class="divTableCell"><div class="1.16">1.16</div></div>
</div>
<div class="divTableRow" id="blue_table_row_4">
<div class="divTableCell"><div>Selection E</div></div>
<div class="divTableCell"><div>1136034</div></div>
<div class="divTableCell"><div class="1.17">1.17</div></div>
</div>
</div>
</div> 

这是Javascript函数：

function btn_click($button_id) {

var list = document.getElementsByClassName("divTableRow");

    for (a = 2; a < list.length; a++) {

        var b = list[a];
        var c = b.getElementsByClassName($button_id);
        var d = c.parentNode.nodeName;
        console.log(d);

    }

}

我得到的错误是：

Uncaught TypeError: Cannot read property 'nodeName' of undefined

但是，如果我只查看“c”的日志（即console.log（c）），我可以看到来自$ button_id的id正确返回相关的类。

因此，我需要以某种方式找出另一种方法来确定哪一行是正确的隐藏，但有点卡住了。

Answer 1

正如Funk Doc评论的那样，问题在于您正在使用

var c = b.getElementsByClassName($button_id);

返回一个元素数组。

修复：如果你想使用所有这些元素，循环遍历它们，如：

var c = b.getElementsByClassName($button_id);
for(var i = 0; i < c.length; i++) {
  var e = c[i].parentNode.parentNode.id;
  //whatever you want to do next
}

有趣的是，使用foreach循环（如for(var i in c) {...}）确实会导致TypeError。

但如果您希望只有一个元素，请使用

var c = b.getElementsByClassName($button_id)[0];

Answer 2

试试这个功能：

function btn_click($button_id) {
    // get all table rows
    var rows = document.querySelectorAll('.divTableBody .divTableRow');

    // loop through the rows
    for (var i = 0; i < rows.length; i++) {
        // check if row has no descendant div with class = $button_id
        if (!rows[i].querySelector('div[class="divTableCell"] div[class="' + $button_id + '"]')) {
            // hide row if condition is true
            rows[i].style.display = 'none';
        }
    }
}

Answer 3

如果这对任何其他人都有用，这里是最终的代码：

function btn_click($button_id) {

var list = document.getElementsByClassName("divTableRow");

    for (a = 2; a < list.length; a++) {

        var b = list[a];
        b.style.display = 'none';
        var c = b.getElementsByClassName($button_id);

            for(var i = 0; i < c.length; i++) { 
                var e = c[i].parentNode.parentNode.id;
                document.getElementById(e).style.display = 'table-row';

            }

    }

}