Question

我正在尝试使用ajax调用动态生成表。为了简化我刚刚添加我的代码到js小提琴的东西 - ＆gt; http://jsfiddle.net/5yLrE/81/

点击按钮＆＃34; HI＆＃34;前两列是正确创建的..但有些如何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字符串。

Answer 2

在增加新表行之前，您需要检查表格单元格的长度。达到最大列长度后，重置行并重新开始。

JSFiddle

max_columns = 2;
count=0;
$("button").click(function() {
    var content='column';
    if(count==max_columns||!$('#maintable tr').length){
        $("#maintable").append("<tr>");
        count=0;
    }
    if(count!=max_columns)
        $("#maintable tr:last").append("<td>"+content+"</td>");
    else
        $("#maintable tr:first").append("<td>"+content+"</td>");
    count++;
});

使用jquery动态创建2列表

2 个答案:

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