javascript - td 在没有 html 的情况下使用 jquery 创建的表中

Question

Here是我的 jsfiddle 作品。我在生成没有任何 html 的表时遇到了一些问题。我有一个 json 对象，我需要迭代并将键和值放入表中，例如:

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

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

Answer 1

你必须第一次遍历键来设置表的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 .

希望这对您有所帮助。