无法读取未定义的属性“ getElementById”

时间:2018-10-16 16:33:00

标签: javascript ajax

我具有此功能,可以通过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和复选框。如果选中此复选框,则应在表中查找为true的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"/>

1 个答案:

答案 0 :(得分:1)

getElementById在文档中可用,而不在tr中。

Documentation

将以下行更改为

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

但是,根据我的猜测,您的表中有多个具有此ID的元素,这可能无法获得所需的结果。发布您的html以及您要执行的操作,也许是另一种方法。

更新:

怀疑,您的td在循环中重复,因此您将多个td与同一id重复。我建议从中删除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";
            }
        }
    }