jquery ajax json table 添加行,使用jQuery建立从Ajax响应（JSON）表行

78

改用的.html

var response = "[{

"rank":"9",

"content":"Alon",

"UID":"5"

},

{

"rank":"6",

"content":"Tala",

"UID":"6"

}]";

// convert string to JSON

response = $.parseJSON(response);

$(function() {

$.each(response, function(i, item) {

var $tr = $('

').append(

$('

').text(item.rank),

$('

').text(item.content),

$('

').text(item.UID)

); //.appendTo('#records_table');

console.log($tr.wrap('

').html());

});

});

2013-07-18 13:04:08

drizzie

+0

这不起作用我认为是因为我的回复响应是字符串”[{“rank” ：“9”，“content”：“Alon”，“UID”：“5”}，{“rank”：“6”，“content”：“Tala”，“UID”：“6”}]“ –

+1

这[作品](http://jsfiddle.net/rrzZU/)，并使管理'td'元素干净 –

+2

我更新了解决方案。您需要使用jQuery的$ .parseJSON函数将字符串转换为JSON。 http://jsfiddle.net/abduncan/rrzZU/1/ –

5

试试这样说：

$.each(response, function(i, item) {

$('

').html("" + response[i].rank + "" + response[i].content + "" + response[i].UID + "").appendTo('#records_table');

});

2013-07-18 13:01:46

tymeJV

+0

它可以是改进？我想对单元格有一个控制，例如，如果我想在td中设置一个属性。 –

+0

当然，您可以通过多种方式来完成，您可以构建每个TD，然后追加，也可以直接在上面的标记中设置属性。你想添加什么属性，虐待提供了一个例子。 –

+0

这不是工作，我想是因为我的回应响应是字符串' “[{ ”等级“：” 9" ， “内容”： “阿龙”， “UID”： “5” }， { “rank”：“6”， “content”：“Tala”， “UID”：“6” }]“' –

3

你不应该为每个单元格和行jQuery的对象。试试这个：

function responseHandler(response)

{

var c = [];

$.each(response, function(i, item) {

c.push("

" + item.rank + "");

c.push("

" + item.content + "");

c.push("

" + item.UID + "");

});

$('#records_table').html(c.join(""));

}

2013-07-18 13:04:56

YD1m

0

jQuery.html需要字符串或回调作为输入，不知道如何你的例子是工作...尝试像$('

').append($('' + item.rank + '').append ... 你有标签fromation一些明确的问题。它应该是$('')和$('')

2013-07-18 13:05:20

duskpoet

28

试试这个：

success: function (response) {

var trHTML = '';

$.each(response, function (i, item) {

trHTML += '

' + item.rank + '' + item.content + '' + item.UID + '';

});

$('#records_table').append(trHTML);

}

2013-07-18 13:07:26

+0

简单而简单。 –

+0

@Charlesliam很高兴帮助你.. :) –

+0

@NeerajSingh链接中断 –

6

一个完整的答案。如果我们有这样的JSON数据

// JSON Data

var articles = [

{

"title":"Title 1",

"url":"URL 1",

"categories":["jQuery"],

"tags":["jquery","json","$.each"]

},

{

"title":"Title 2",

"url":"URL 2",

"categories":["Java"],

"tags":["java","json","jquery"]

}

];

我们要查看该表结构

Title	Categories	Tags

下面的JS代码将填补每一个JSON元素

// 1. remove all existing rows

$("tr:has(td)").remove();

// 2. get each article

$.each(articles, function (index, article) {

// 2.2 Create table column for categories

var td_categories = $("

");

// 2.3 get each category of this article

$.each(article.categories, function (i, category) {

var span = $("");

span.text(category);

td_categories.append(span);

});

// 2.4 Create table column for tags

var td_tags = $("

");

// 2.5 get each tag of this article

$.each(article.tags, function (i, tag) {

var span = $("");

span.text(tag);

td_tags.append(span);

});

// 2.6 Create a new row and append 3 columns (title+url, categories, tags)

$("#added-articles").append($('

')

.append($('

').html(" "+article.title+""))

.append(td_categories)

.append(td_tags)

);

});

2013-07-18 20:56:34

hmkcode

3

$.ajax({

type: 'GET',

url: urlString ,

dataType: 'json',

success: function (response) {

var trHTML = '';

for(var f=0;f

trHTML += '

' + response[f]['app_action_name']+' '+response[f]['action_type'] +''+response[f]['points']+'';

}

$('#result').html(trHTML);

$(".spin-grid").removeClass("fa-spin");

}

});

2015-08-11 07:35:23

1

我创造了这个jQuery函数 创建一行

/**

* Draw a table from json array

* @param {array} json_data_array Data array as JSON multi dimension array

* @param {array} head_array Table Headings as an array (Array items must me correspond to JSON array)

* @param {array} item_array JSON array's sub element list as an array

* @param {string} destinaion_element '#id' or '.class': html output will be rendered to this element

* @returns {string} HTML output will be rendered to 'destinaion_element'

*/

function draw_a_table_from_json(json_data_array, head_array, item_array, destinaion_element) {

var table = '

//TH Loop

table += '

';

$.each(head_array, function (head_array_key, head_array_value) {

table += '

' + head_array_value + '';

});

table += '

';

//TR loop

$.each(json_data_array, function (key, value) {

table += '

';

//TD loop

$.each(item_array, function (item_key, item_value) {

table += '

' + value[item_value] + '';

});

table += '

';

});

table += '

';

$(destinaion_element).append(table);

}

;

2016-11-07 04:42:35

1

你可以这样做：

$(function(){

$.ajax({

url: '',

data: '',

dataType: json,

async: true,

method: "GET"

success: function(data){

//If the REST API returned a successful response it'll be stored in data,

//just parse that field using jQuery and you're all set

var tblSomething = ' Heading Col 1 Heading Col 2 Col 3

';

$.each(data, function(idx, obj){

//Outer .each loop is for traversing the JSON rows

tblSomething += '

';

//Inner .each loop is for traversing JSON columns

$.each(obj, function(key, value){

tblSomething += '

' + value + '';

});

tblSomething += '

';

});

tblSomething += '

';

$('#tblSomething').html(tblSomething);

},

error: function(jqXHR, textStatus, errorThrown){

alert('Hey, something went wrong because: ' + errorThrown);

}

});

});

2017-08-15 12:56:03

0

我下面从阿贾克斯得到JSON的响应，并且不使用解析parseJson：

$.ajax({

dataType: 'json',

type: 'GET',

url: 'get/allworldbankaccounts.json',

data: $("body form:first").serialize(),

如果您正在使用的dataType为文本，那么你需要$ .parseJSON(响应)

2017-10-04 08:47:27

Harpreet