我从服务器获取以下JSON字符串作为响应
[{"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
});
警报正确显示JSON字符串。现在我想将此响应映射到我的表
说
我怎样才能做到这一点 ？？
试试这个：
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
});
作为您已经拥有的答案的替代方案，以及其他来自此帖子的答案。我最近有一个类似的任务，并为我创建了一个小的jquery插件。它非常小，在3KB以下缩小，并具有排序，分页和显示和隐藏列的能力。
使用css进行自定义应该很容易。更多信息可以在这里找到http://mrjsontable.azurewebsites.net/，你可以在github https://github.com/MatchingRadar/Mr.JsonTable上找到你想做的项目。
要使其工作，请下载文件并将其弹出您的网站。按照说明操作，您最终应该得到以下内容：
<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
});
}
希望它能帮助别人！
有很多插件可以做到这一点。我通常使用数据表，它工作得很好。 http://datatables.net/
<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>
循环遍历数据并将其附加到类似上面代码的表中。
如果要从json对象获取结果，请使用datatable。 Datatable的工作方式与将json结果转换为表格格式的方式相同，具有可搜索和可排序列的功能。
我创建了以下函数来从任意JSON对象生成一个html表：
function toTable(json, colKeyClassMap, rowKeyClassMap){
let tab;
if(typeof colKeyClassMap === 'undefined'){
colKeyClassMap = {};
}
if(typeof rowKeyClassMap === 'undefined'){
rowKeyClassMap = {};
}
const newTable = '<table class="table table-bordered table-condensed table-striped" />';
if($.isArray(json)){
if(json.length === 0){
return '[]'
} else {
const first = json[0];
if($.isPlainObject(first)){
tab = $(newTable);
const row = $('<tr />');
tab.append(row);
$.each( first, function( key, value ) {
row.append($('<th />').addClass(colKeyClassMap[key]).text(key))
});
$.each( json, function( key, value ) {
const row = $('<tr />');
$.each( value, function( key, value ) {
row.append($('<td />').addClass(colKeyClassMap[key]).html(toTable(value, colKeyClassMap, rowKeyClassMap)))
});
tab.append(row);
});
return tab;
} else if ($.isArray(first)) {
tab = $(newTable);
$.each( json, function( key, value ) {
const tr = $('<tr />');
const td = $('<td />');
tr.append(td);
$.each( value, function( key, value ) {
td.append(toTable(value, colKeyClassMap, rowKeyClassMap));
});
tab.append(tr);
});
return tab;
} else {
return json.join(", ");
}
}
} else if($.isPlainObject(json)){
tab = $(newTable);
$.each( json, function( key, value ) {
tab.append(
$('<tr />')
.append($('<th style="width: 20%;"/>').addClass(rowKeyClassMap[key]).text(key))
.append($('<td />').addClass(rowKeyClassMap[key]).html(toTable(value, colKeyClassMap, rowKeyClassMap))));
});
return tab;
} else if (typeof json === 'string') {
if(json.slice(0, 4) === 'http'){
return '<a target="_blank" href="'+json+'">'+json+'</a>';
}
return json;
} else {
return ''+json;
}
};
所以你可以简单地打电话：
$('#mydiv').html(toTable([{"city":"AMBALA","cStatus":"Y"},{"city":"ASANKHURD","cStatus":"Y"},{"city":"ASSANDH","cStatus":"Y"}]));
试试这个：
<!DOCTYPE html>
<html>
<head>
<title>Convert JSON Data to HTML Table</title>
<style>
th, td, p, input {
font:14px Verdana;
}
tr{
align: right
}
table, th, td
{
border: solid 1px #DDD;
border-collapse: collapse;
padding: 2px 3px;
text-align: center;
}
th {
font-weight:bold;
}
</style>
</head>
<body>
<input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" />
<div id="showData"></div>
</body>
<script>
function CreateTableFromJSON() {
var obj = {[{"city":"AMBALA","cStatus":"Y"},
{"city":"ASANKHURD","cStatus":"Y"},
{"city":"ASSANDH","cStatus":"Y"}]}
var table = document.createElement('table');
var tr = table.insertRow(-1);
function iterate(obj,table,tr){
for(var props in obj){
if(obj.hasOwnProperty(props)){
if(typeof obj[props]=='object')
{
var trNext = table.insertRow(-1);
var tabCellHead = trNext.insertCell(-1);
var tabCell = trNext.insertCell(-1);
var table_in = document.createElement('table');
var tr_in;
var th = document.createElement("th");
th.innerHTML = props;
tabCellHead.appendChild(th);
tabCell.appendChild(table_in)
iterate(obj[props],table_in,tr_in);
}
else
{
if(tr === undefined)
{
tr = table.insertRow(-1);
}
var tabCell = tr.insertCell(-1);
console.log(props+' * '+obj[props]);
tabCell.innerHTML = obj[props];
}
}
}
}
iterate(obj,table,tr);
var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);
}
</script>
</html>
HTML:
<div id="container"></div>
JS:
$('#search').click(function() {
$.ajax({
type: 'POST',
url: 'cityResults.htm',
data: $('#cityDetails').serialize(),
dataType:"json", //to parse string into JSON object,
success: function(data){
var len = data.length;
var txt = "";
if(len > 0){
for(var i=0;i<len;i++){
txt = "<tr><td>"+data[i].city+"</td><td>"+data[i].cStatus+"</td></tr>";
$("#container").append(txt);
}
},
error: function(jqXHR, textStatus, errorThrown){
alert('error: ' + textStatus + ': ' + errorThrown);
}
});
return false;
});
检查下面的链接，以最简单，最快的方式将JSON数据转换为标准HTML表。
http://crunchify.com/crunchifyjsontohtml-js-json-to-html-table-converter-script/