Не удается прочитать свойство 'getElementById' из неопределенного

Question

У меня есть эта функция для фильтрации по jquery, и она возвращает эту ошибку:

Невозможно прочитать свойство 'getElementById' из неопределенного

 function VerificaCheck() { 
    var input, filter, table, tr, td, i, filtro;
    input = document.getElementById("busca2");
    filter = input.value.toUpperCase();
    table = document.getElementById("tablepesquisa2");
    tr = table.getElementsByTagName("tr");
    filtro = document.getElementById("filtroPesquisa2").value;
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[filtro];
        var tipoProduto = tr[i].getElementById("tipoProduto").value;
        if (td) {
            if (tipoProduto == $('#Produtos').prop("checked")) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }
    }
}

Это HTML-код моей таблицы и флажок.Если флажок установлен, он должен искать в таблице поля типа Product, которые имеют значение true

 <div class="form-group">
                    <div class="col-sm-3">
                        <select id="filtroPesquisa2" class="form-control">
                            <option value="0">Código</option>
                            <option value="1">Descrição</option>
                        </select>
                    </div>
                    <div class="col-sm-7">
                        <input type="text" id="busca2" placeholder="Pesquisa.." onkeyup="myFunction2();" class="form-control" />
                    </div>
                </div>
                <div class="modal-body">
                    <div class="table-overflow col-sm-12">
                        <table class="table table-responsive table-hover" id="tablepesquisa2">
                            <thead>
                                <tr>
                                    <th>Código</th>
                                    <th>Nome</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (var item in Model.Produto)
                                {
                                <tr>
                                    <td>@item.Codigo</td>
                                    <td>@item.nome</td>
                                    <td align="right">
                                        <a href="#" onclick="fecha2();CarregaProduto('@item.Codigo');" title="Selecionar"><i class="fa fa-check-circle fa-lg"></i></a>&nbsp;
                                    </td>
                                    <td id="tipoProduto" value="@item.TipoProduto">@item.TipoProduto</td>
                                </tr>
                                }

                            </tbody>
                        </table>
                    </div>
                </div>

<input type="checkbox" asp-for="Produtos" onclick="checkProduto();" name="Produtos" id="Produtos"/>

Answer 1

getElementById доступно для документа, а не для tr.

Документация

измените следующую строку на

var tipoProduto = document.getElementById("tipoProduto").value;

Однако, это может не дать того, что вы хотите, основываясь на моих предположениях, что у вас есть несколько элементов с этим идентификатором в вашей таблице.Опубликуйте свой html и то, что вы пытаетесь сделать, может быть, есть другой способ сделать это.

ОБНОВЛЕНИЕ:

Как подозревается, ваш td повторяется в цикле, поэтому вы умножаете td с таким же id.Я бы предложил удалить идентификатор из него.Поскольку значение, которое вы ищете, является последним td, то, что вы можете сделать, чтобы получить значение, которое вы ищете, это (один из способов):

td[td.length-1].innerHTML

Таким образом, цикл будет выглядеть как:

for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[filtro];

        if (td) {
            var tipoProduto = td[td.length-1].innerHtml;

            if (tipoProduto == $('#Produtos').prop("checked")) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }
    }