如果我們有這樣的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"]

}

];

我們想在這個表格結構中查看

TitleCategoriesTags

以下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)

);

});

總結

以上是生活随笔為你收集整理的jquery ajax json table 添加行,使用jQuery从AJAX响应构建表行（json）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。