javascript - 无法读取未定义的属性“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 和复选框。如果复选框被选中，它应该在表中查找 typeProduct 的字段为真

 <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"/>

标签： javascriptajax

Answer 1

getElementById在文档上可用，而不是在tr.

文档

将以下行更改为

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

但是，这可能无法得到您想要的，根据我的猜测，您的表中的这个 id 有多个元素。发布您的 html 和您正在尝试做的事情，可能还有另一种方法可以做到这一点。

更新：

正如怀疑的那样，您td在循环中重复，因此您td使用相同的多个id。我建议从中删除 id 。由于您要查找的值是 last 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";
            }
        }
    }