使用解析器进行 Javascript 搜索

Question

我想让这段代码与我的解析器一起工作。

function search() {
var input, filter, table, tr, td, i;
input = document.getElementById("input");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
        }
    }
}

解析器:

function load() {
data = data[0];
var uno = document.getElementById('data');
for(var i = 0; i < data.list.length; i++)
{
    var content = uno.innerHTML;
    content += "<div class='grid-item'><div class='inside' id='item" + i + "'><h2 id='contents" + i + "' class='pl-content-title' href=./index.html#" + data.list[i].hash + ">" + data.list[i].title + "</h2><div class='collapsing'><br><table id='mytable'>";
    for(var e = 0; e < data.list[i].content.length; e++)
    {
        content += "<tr><td class='tabledata'><a class='pl-content' href=./index.html#" + data.list[i].content[e].hash + ">" + data.list[i].content[e].title + "</a></td></tr>";
    }
    uno.innerHTML = content + "</table></div></div></div>";
}

html:

<input class="pl-search" type="text" placeholder="Suche" id="input" onkeyup="search()">

如果我将表直接复制到我的 html 中，它可以工作，但如果表是由我的解析器脚本构建的，则不行。 来自浏览器控制台的错误消息是:

Uncaught TypeError: Cannot read property 'getElementsByTagName' of null

对此有什么想法吗？

Answer 1

<table id='mytable'>

应该是

<table id='myTable'>

此拼写错误导致 table = document.getElementById("myTable"); 返回 null。

在这样的静态示例中，您只需修复拼写错误即可。

编写动态函数时，通过使用后备来防止错误

tr = table ? table.getElementsByTagName("tr") : null;

当您评估 for 时，使用 tr 依此类推。 (声明 k)

for (i = 0, k= tr ? tr.length : 0; i < k; i++)