根据ajax json响应更新html表

Update html table according to ajax json response

本文关键字：html 更新 响应 ajax json 根据      更新时间：2024-04-14

我有一个JSON响应，如下

{
   "Parent": "skystar",
   "Children": [
     {"Name":"MW"},
     {"Name":"PR"},
     {"Name":"PV"},
     {"Name":"ST"}
   ]
},
{
       "Parent": "RR",
       "Children": [
         {"Name":"RC"},
         {"Name":"RP"}
       ]
    }

现在我需要把这个绑定到表上。

我试着像下面那样调用AJAX

$.ajax({
    url: 'echo/sample.json/',
    success: function (response) {
        var trHTML = '';
        $.each(response, function (i, item) {
            trHTML += '<tr><td>' + item.Children + '</td>';
        });
        $('#records_table').append(trHTML);
    }
});

但我无法绑定表

我做错了什么？？

JSFIDDLE

每个孩子都有一件事，那就是如何添加链接

如何在Jquery或javascript中做到这一点？？

有什么帮助吗？？

演示：http://jsfiddle.net/tqyn3/336/

var jsonData = '[{"Parent":"skystar","Children":[{"Name":"MW"},{"Name":"PR"},{"Name":"PV"},{"Name":"ST"}]},{"Parent":"RR","Children":[{"Name":"RV"},{"Name":"RP"}]}]';
$.ajax({
    url: '/echo/json/',
    type: 'POST',
    data: {
        json: jsonData
    },
    dataType:'json',
    success: function (response) {
        var trHTML = '';
        $.each(response, function (i, item) {
           //alert(item.children);
            $.each(item.Children, function(j, child) {
                trHTML += '<tr><td>' + child.Name + '</td>';
            });
        });
        $('#records_table').append(trHTML);
    }
});

请参阅以下JSFiddlehttp://jsfiddle.net/s701aduz/

var jsonData = '[{"Parent":"skystar","Children":[{"Name":"MW"},{"Name":"PR"},{"Name":"PV"},{"Name":"ST"}]},{"Parent":"RR","Children":[{"Name":"RV"},{"Name":"RP"}]}]';
$.ajax({
    url: '/echo/json/',
    type: 'POST',
    data: {
        json: jsonData
    },
    dataType:'json',
    success: function (response) {
        var trHTML = '';
        $.each(response, function (i, item) {
            trHTML += '<tr>';
            $.each(item.Children, function(j, child) {
                trHTML += '<tr><td>' + child.Name + '</td>';
            });
            trHTML += '</tr>';
        });
        $('#records_table').append(trHTML);
    }
});

您遇到的问题是item.Children本身就是一个数组，所以当您将其包含在字符串中时，它只会输出[object Object]，您还必须迭代子级。还要为响应中的每个元素造一行，为每个子元素造一个td，或者至少我猜这就是你想要的。

var json_data = $.parseJSON(response);
    var table = $('<table>');
    $.each(json_data,function(index,obj){
        var tr = $('<tr>');
        $.each(obj.Children,function(_index,_children){
            var td = $('<td>');
            $(td).text(_children.Name);
            $(tr).append(td);
        })
         $('#records_table').append(tr);
    });

var jsonData = [{"Parent":"skystar","Children":[{"Name":"MW"},{"Name":"PR"},{"Name":"PV"},{"Name":"ST"}]},
{"Parent":"RR","Children":[{"Name":"RV"},{"Name":"RP"}]}
];
$.each(jsonData, function (i, item) {
    if(i == 0) {
        $('#records_table').find('th:first').html(item.Parent);
    } else {
        $('#records_table').find('th:last').after('<th>'+ item.Parent +'</th>');
    }
    $.each(item.Children, function(j, child){
        if(i==0) {
            var tr = $('<tr />');
            var td = $('<td />');
            $(td).text(child.Name);
            $(tr).append(td);
            $('#records_table').append( tr );
        } else {
            var td = $('<td />');
            $(td).text(child.Name);
            $('#records_table').find('tr:eq('+(j+1)+')').append( td );
        }
    })
});

检查一下会对你有所帮助http://jsfiddle.net/tqyn3/338/

相关文章：