Question

我在生成实时搜索结果列表时遇到问题 - 我将它们放在id为“result”的特殊div中，如下所示（不介意SightsList，这是一个AJAX - 预先检索的数组;我知道，algorythm也不是最优的，但那不是主题。所以主要的问题是为什么表行会被抛出表格？浏览器中的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("");  
    }
}

Answer 1

.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>');

并删除您尝试添加结束表标记。

动态内容被抛出表格

1 个答案: