javascript - 动态内容从表中抛出

我在生成实时搜索结果列表时遇到问题-我将它们放在ID为“结果”的特殊div中，方法如下（请注意SightsList，这是AJAX-预检索的数组；算法也不是最优的） ，我知道，但这不是主题）。所以主要的问题是为什么表行被抛出表？浏览器中的HTML看起来像<table></table><tr><td>（然后生成所有行）。 <ul>和<li>也有同样的问题。

$("input#namebox").keyup(function() {

    var value = $(this).val();
    value = value.toLowerCase();
    value = $.trim(value);

    if (value.length > 3) {

        $("#result").html("<table>");

        for (var i=0; i<SightsList.length; i++) {
            if (undefined != SightsList[i]) {
                if (void 0 != SightsList[i]) {

                    SightsList[i] = SightsList[i].toLowerCase();

                    if (SightsList[i].indexOf(value)+1) {

                        $("#result").append('<tr><td class="singleresult" valign="middle">' + SightsList[i]+ '  –  ' + '<img src="/images/balloon.gif" rel="'+ i +'" class="balloon_img" /></td></tr>');

                        $("#message").show();
                    }
                }
            }

            if (i==(SightsList.length-1)) {
                $("#result").append("</table>");
            }
        }


        //tried to close table here with the same (no) result                                   $('.singleresult').highlight(value);

        $("#result").show();
    }

    if (value.length < 4) {
        $("#result").hide();
        $("#result").html("");
    }
}

最佳答案

.html和.append不仅是字符串函数，它们还可以在DOM上运行。

$("#result").html("<table>")将表放在#result元素中。由于未指定任何行，因此它是一个空表（<table></table>）。然后，您的.append尝试在该表之后放置一行。

因此，您不想追加到#result的内容，而是想追加到要创建的表：

$("#result > table").append('<tr><td class="singleresult" valign="middle">' + SightsList[i]+ ' ' + '<img src="/images/balloon.gif" rel="'+ i +'" class="balloon_img" /></td></tr>');

并消除您添加终端表标签的尝试。