td's在不使用html的情况下使用jquery创建表

td's in table creating with jquery without html

本文关键字：情况下 jquery 创建 html td      更新时间：2023-09-26

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

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

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

您必须在第一次设置表的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);
        }
    }        
});

看看工作小提琴。

希望这能有所帮助。

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

从这里，您可以看到如何创建表结构，并用所需的实际数据替换key和val。

您需要在每次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/

相关文章：