在HTML表格中显示JSON数据
我从服务器得到下面的JSONstring作为响应
[{"city":"AMBALA","cStatus":"Y"},{"city":"ASANKHURD","cStatus":"Y"},{"city":"ASSANDH","cStatus":"Y"}] 这是我的JQuery代码
$('#search').click(function() { alert("submit handler has fired"); $.ajax({ type: 'POST', url: 'cityResults.htm', data: $('#cityDetails').serialize(), success: function(data){ alert(data); }, error: function(jqXHR, textStatus, errorThrown){ alert('error: ' + textStatus + ': ' + errorThrown); } }); return false;//suppress natural form submission });
该警报正确显示JSONstring。 现在我想把这个响应映射到我的表
说
我怎样才能做到这一点 ？？
尝试这个：
CSS：
.hidden{display:none;}
HTML：
<table id="table" class="hidden"> <tr> <th>City</th> <th>Status</th> </tr> </table>
JS：
$('#search').click(function() { $.ajax({ type: 'POST', url: 'cityResults.htm', data: $('#cityDetails').serialize(), dataType:"json", //to parse string into JSON object, success: function(data){ if(data){ var len = data.length; var txt = ""; if(len > 0){ for(var i=0;i<len;i++){ if(data[i].city && data[i].cStatus){ txt += "<tr><td>"+data[i].city+"</td><td>"+data[i].cStatus+"</td></tr>"; } } if(txt != ""){ $("#table").append(txt).removeClass("hidden"); } } } }, error: function(jqXHR, textStatus, errorThrown){ alert('error: ' + textStatus + ': ' + errorThrown); } }); return false;//suppress natural form submission });
作为您已经拥有的答案的替代scheme，以及针对此post的其他scheme。 我最近有一个类似的任务，并创build一个小的jQuery插件来为我做。 它在3KB以下非常小，并且具有sorting，分页以及显示和隐藏列的能力。
用css定制应该很容易。 更多的信息可以在这里findhttp://mrjsontable.azurewebsites.net/和项目是可以做的，如你所愿在github上https://github.com/MatchingRadar/Mr.JsonTable
要使其工作，请下载文件并将其popup到您的网站中。 按照说明，你应该得到如下结果：
<div id="citytable"></div>
然后在ajax成功的方法，你会想这样的事情
success: function(data){ $("#citytable").mrjsontable({ tableClass: "my-table", pageSize: 10, //you can change the page size here columns: [ new $.fn.mrjsontablecolumn({ heading: "City", data: "city" }), new $.fn.mrjsontablecolumn({ heading: "City Status", data: "cStatus" }) ], data: data }); }
希望它可以帮助别人！
<table id="myData"> </table> <script type="text/javascript"> $('#search').click(function() { alert("submit handler has fired"); $.ajax({ type: 'POST', url: 'cityResults.htm', data: $('#cityDetails').serialize(), success: function(data){ $.each(data, function( index, value ) { var row = $("<tr><td>" + value.city + "</td><td>" + value.cStatus + "</td></tr>"); $("#myData").append(row); }); }, error: function(jqXHR, textStatus, errorThrown){ alert('error: ' + textStatus + ': ' + errorThrown); } }); return false;//suppress natural form submission }); </script>
循环访问数据并将其附加到上面的代码中。
有很多插件可以做到这一点。 我通常使用数据表，它的工作很好。 http://datatables.net/
如果你想从json对象得到结果，请使用数据表。 Datatable也可以将json结果转换为表格格式，同时自动search和sorting列的function。
检查下面的链接，以最简单和最快的方式将JSON数据转换为标准HTML表格。
http://crunchify.com/crunchifyjsontohtml-js-json-to-html-table-converter-script/
