Изо всех сил пытается скрыть строку, основанную на значении определенного столбца (должно быть легко в теории ...)

Question

Что должно быть очень простой проблемой, я застрял на пару дней и, как обычно, хотя есть много похожих вопросов, нет точного соответствия (возможно, потому что я использую элементы для создания таблицы,а не).

Короче говоря, у меня есть кнопка, которая при нажатии отправляет идентификатор рынка для функции ниже (это работает правильно во избежание сомнений).

Идея состоит в том, чтоЗатем функция скрывает все строки таблицы, у которых нет этого рыночного идентификатора, в столбце Market 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 правильно возвращаетсвязанный класс.

Поэтому мне нужно как-то выработать альтернативный способ определения того, какой рядправильные, чтобы скрыть, но я немного застрял.

Answer 1

Попробуйте эту функцию:

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 2

На всякий случай, если это кому-то пригодится, вот окончательный код:

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';

            }

    }

}

Answer 3

Как прокомментировал 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];