javascript - 使用 jquery 动态创建 2 列表

Question

我正在尝试使用 ajax 调用动态生成一个表。为了简化事情，我刚刚将代码添加到 js fiddle -> http://jsfiddle.net/5yLrE/81/

当您单击“HI”按钮时，前两列已正确创建。但是当 td 长度达到 2 时，会出现一些情况。它不会创建另一行。原因是，当我确实在表元素上找到时，它实际上检索子表元素。有人可以帮忙吗？

我想要一个两栏表格..谢谢。

示例代码:

var tr = $("#maintable tbody tr:first");

if(!tr.length || tr.find("td:first").length >= max) {
    $("#maintable").append("<tr>");
}
if(count==0) {
    $("#maintable tr:last").append("<td>hi"+content+"</td>");
}

Answer 1

基本上，后代的匹配是允许曾曾孙等的。只需要使匹配更具体。

JSFiddle:http://jsfiddle.net/TrueBlueAussie/5yLrE/91/

max = 2
$("button").click(function () {
    var content = $('#template').html();
    var $table = $("#maintable");
    var tr = $table.find(">tbody>tr:last");
    if (!tr.length || tr.find(">td").length >= max) {
        // Append a blank row
        tr = $("<tr>");
        $table.append(tr);
    }
    tr.append("<td>hi " + content + "</td>");
});

这个总是以最后一行为目标，如果它根本不存在(或者已经有太多的div)，则添加一行，这就是我收集的你想要的。

我还使用了我建议的模板将困惑的 HTML 字符串与代码分开。