javascript - 努力根据特定列的值隐藏行(理论上应该很容易......)

Question

应该是一个很简单的问题让我卡了几天和往常一样，虽然有很多类似的问题，但没有完全匹配(可能是因为我使用元素创建表格，而不是 ).

简而言之，我有一个按钮，单击该按钮会向下面的函数发送一个市场 ID(为了避免疑义，它可以正常工作)。

想法是，该函数然后隐藏所有在市场 ID 列中没有该市场 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];