Question

Here是我的jsfiddle工作。我有一些问题，生成表没有任何HTML。我有一个json对象，我需要itterate并将键和值放在表中，如：

<tr> <td> key </td> <td> key </td> ... </tr>
<tr> <td> val </td> <td> val </td> ... </tr>

我首先尝试生成像this一样的表，但接下来我想使用创建td和tr的jquery版本，但所有键和值只有一个td附加，实际上这不是我想要的。

Answer 1

问题出在col和row变量的范围内。您必须在循环中重新分配它们，或重新声明。 Here是更新的jsfiddle。顺便说一下，不需要使用for循环。在jQuery中，在对象上使用$.each函数就足够了。

从这里，您可以了解如何创建表格结构，并将key和val替换为您需要的实际数据。

Answer 2

您需要在每个for次迭代中创建新的行对象：

for (var mrksIndex = 0, mrksLength = jsn.length; mrksIndex <= mrksLength; ++mrksIndex) {
    row = $("<tr/>");
    $.each(jsn[mrksIndex], function (key, val) {
        col = $("<td/>");
        col.append(key);
        row.append(col);
        table.append(row);
    });
}

演示： https://jsfiddle.net/6dw2u8uz/15/

Answer 3

第一次设置表的head时必须循环键，然后在each内创建行并将每个行追加到表中以使body为{你的桌子，查看示例代码：

$.ajax({
    type : "POST",
    dataType : "json",
    url : '/echo/json/',
    data : { json: JSON.stringify( jsonData ) },
    success : function(data){
        var jsn = $(data.markers);

        //First time append table head
        if(!header)
        { 
            var row = $('<tr></tr>');

            for(key in jsn[0])
            {
                row.append('<th>'+key+'</th>');
            }

            table.append(row);

            header = true;
        }

        for ( var i = 0; i < jsn.length ; i++){
            var row = $('<tr></tr>');

            $.each(jsn[i], function(key,val)
            {
                row.append('<td>'+val+'</td>');
            });

            table.append(row);
        }

    }        
});

查看 Working fiddle 。

希望这有帮助。

用不带html的jquery创建的表中的td

3 个答案: