td的表创建与jquery没有html

Here是我的jsfiddle的工作。我在生成没有任何html的表格时遇到了一些问题。我有我需要itterate，并把键和值表像一个JSON对象：td的表创建与jquery没有html

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

我第一次尝试产生像this一个表，但是接下来，我想利用创造td的jQuery的版本“ s和tr's，但所有的键和值只附加在一个td，实际上这不是我想要的。

来源

2015-11-22 Bogdan Bogdanov

您可以通过按键具有循环首次设置表的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。

希望这会有所帮助。

来源

2015-11-22 22:07:32

是的，它有很大的帮助。其实这是我想要做的。谢谢！ –

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

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

来源

2015-11-22 22:01:46

感谢您使用'$ .each（）'的建议。我使用'for'，因为我有'$ .each（）'的一些问题，并且我很困惑什么$ .each会在某些时候返回给我，所以我使它对我更具可读性。 –

你需要在每个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/

来源

2015-11-22 22:03:53 dfsq

td的表创建与jquery没有html

回答

相关问题