JSON陣列HTML表並顯示td標籤內的數據

我JSON陣列回報波紋管JSON陣列HTML表並顯示td標籤內的數據

{"id":16,"minutes":146} 
{"id":17,"minutes":137} 
{"id":18,"minutes":123} 
{"id":22,"minutes":84}

我試圖使上面的表格tbody的TD內JSON數組，JSON數組的ID等於TD的ID和顯示td標籤

內部分鐘例如JSON ID：16分：146和在<td id="16">146</td>

<table> 
     <thead> 
     <tr> 
      <th>op</th> 
      <th>Minutes</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td>op1</td> 
      <td id="16">0</td> 
     </tr> 
     <tr> 
      <td>op2</td> 
      <td id="17">0</td> 
     </tr> 
     <tr> 
      <td>op3</td> 
      <td id="18">0</td> 
     </tr> 
<!--....and goes on --> 
     </tbody> 
    </table>

顯示它

$.ajax({ url: statUrl, type: 'POST', 
    data: { 
     begin: begin, 
     end: end 
    }, 
    success: function(data){ 


    } 
});

來源

2012-07-17 memo

那麼，有什麼問題呢？ – Blender 2012-07-17 23:09:23

查看jsRender或任何模板插件。你可以將整個數組傳遞給一個模板，它將返回html – MrOBrian 2012-07-17 23:11:55

你用什麼來渲染json到html？這部分看起來很重要。 – Tyrsius 2012-07-17 23:13:01

所建議的固定JSON陣列

{ 
"25":72.3833, 
"17":116.3167, 
"16":25.75, 
"34":28.3333, 
"29":136.8831, 
"19":40.9166, 
"32":43.6, 
"22":83.9001 
}

和js

$.getJSON(statUrl, {begin: begin, end: end}, function(data) { 

     $.each(data, function(key, val) { 
      $('#op_' + key).text(Math.ceil(val));//also fixed td id 
     }); 
});

所以得到的結果如預期。感謝您的時間。

來源

2012-07-18 01:56:30 memo

你JSON是無效的，應該只能代表一個對象，你有什麼有效的版本將

[{"id":16,"minutes":146}, 
{"id":17,"minutes":137}, 
{"id":18,"minutes":123}, 
{"id":22,"minutes":84}]

來源

2012-07-17 23:12:08 Musa

如果您的數據的ID直接對應於已經存在的DOM元素ID，那麼它應該是相當容易：

for (var i = 0; i < data.length; i++) { 
    $('#' + data[i].id).text(data[i].minutes); 
}

這是使用jQuery ofc。

來源

2012-07-17 23:13:38

你可以使用json_decode（$ json，true）在php中將json轉換爲數組，然後遍歷它的元素並構建表。

如果你想這樣做客戶端，我想你必須手動創建表，TR和TD元素和填充它們。 ExtJS已經爲此準備好了網格。

服務器端更容易。

來源

2012-07-17 23:19:54 Ali

我在這裏創建了一個jsFiddle：http://jsfiddle.net/5pKjW/11/ 正如Musa所說，您發佈的JSON無效，它應該是一個包含所有對象的數組。的代碼之後基本上是你所需要的成功回調裏面做，只是用data代替result。我要做的就是創建一個表，並附加一排的陣列中的每個元素，然後追加整個表到DOM的元素。

var result = [{"id":16,"minutes":146},{"id":17,"minutes":137},{"id":18,"minutes":123},{"id":22,"minutes":84}]; 
var $table = $('<table><thead><tr><th>op</th><th>Minutes</th></tr></thead>'), 
    $tbody = $('<tbody>').appendTo($table), 
    i; 
for (i = 0; i < result.length; i++){ 
    $tbody.append('<tr><td>op' + (i+1) + '</td><td id="' + result[i].id + '">0</td></tr>'); 
} 
$table.appendTo('#container');

正如T.J. Crowder評論說，有效的HTML4 id屬性不能以數字開頭。如果我是你，我會用一個字符串加前綴（<td id="prefix' + result[i].id + '">0</td>）。

MrOBrian建議使用一個渲染引擎。也許對於這樣一個簡單的例子，如果你不需要其他地方的渲染引擎，這是一個矯枉過正的問題，但這絕對是值得考慮的事情，如果你將來需要更復雜的東西。

來源

2012-07-17 23:47:21

JSON陣列HTML表並顯示td標籤內的數據

回答

相關問題