jquery和ajax的结合制作表格,使用jQuery从AJAX响应构建表行（json）

繁花如伊

如果我们有这样的JSON数据// JSON Datavar 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)    ); });