Question

伙计们，我知道它的虚拟问题，但我已经花了很多时间在这里仍然无法达到..我想以表格形式打印json内容..这是我的代码

[{
"id": 1,
"name": "name1",
"age": 67,
"feedback": "feedback1"
}, {
"id": 2,
"name": "name2",
"age": 30,
"feedback": "feedback2"
}, {
"id": 3,
"name": "name3",
"age": 59,
"feedback": "feedback3"
   }, {
"id": 4,
"name": "name4",
"age": 17,
"feedback": "feedback4"
}]

在javascript中

$（document）.ready（function（）{ $就（{

    url : 'data.json',
    error : function(that, e) {

        console.log(e);
    },
    success : function(data) {
        $.each(data, function(index1, MyList) {
            $.each(MyList, function(index2, item) {
                $('body').append('<div id="div'+ index2+'" />');
                $('#div' + index2).append(MyList[index2]);
            });
        });

    }
});

});

这是我的输出

 1234
 name1name2name3name4
 67305917
 feedback1feedback2feedback3feedback4

我希望以像这样的表格形式制作它

1 name1 67 feedback1
2 name2 39 feedback2
3 name3 59 feedback3
4 name4 17 feedback4

Answer 1

试试这个片段。你不需要两个循环。只需循环项目并使用每个项目中的数据构建打包行标记。

＆＃13;

{x1, y1}

＆＃13;

data = [{
  "id": 1,
  "name": "name1",
  "age": 67,
  "feedback": "feedback1"
}, {
  "id": 2,
  "name": "name2",
  "age": 30,
  "feedback": "feedback2"
}, {
  "id": 3,
  "name": "name3",
  "age": 59,
  "feedback": "feedback3"
}, {
  "id": 4,
  "name": "name4",
  "age": 17,
  "feedback": "feedback4"
}]
var table_markyp = "<table>";
$.each(data, function(i, v) {
  table_markyp += '<tr><td>' + v.id + '</td><td>' + v.name + '</td><td>' + v.age + '</td><td>' + v.feedback + '</td><tr>';

})
table_markyp += '</table>';
$('body').append(table_markyp)

＆＃13;

Answer 2

创建一个ID为<div id="tablecontainer">的容器，下面将生成一个包含结果的表

如果您想要标题，则可以从data[0]等数据中获取一个对象，执行Object.keys(data[0])并将其附加到<tr/> <th/>对象，如下面的行方法

success: function(data) {
  var container = $('#tablecontainer');
  var table = $('<table></table>');
  data.forEach(function(datarow) {
    var row = $("<tr />");
    for (var item in datarow) {
      row.append($("<td>" + datarow[item] + "</td>"));
    }
    table.append(row);
  });
  container.append(table);
}

带标题的示例输出：

var data = [{
  "id": 1,
  "name": "name1",
  "age": 67,
  "feedback": "feedback1"
}, {
  "id": 2,
  "name": "name2",
  "age": 30,
  "feedback": "feedback2"
}, {
  "id": 3,
  "name": "name3",
  "age": 59,
  "feedback": "feedback3"
}, {
  "id": 4,
  "name": "name4",
  "age": 17,
  "feedback": "feedback4"
}];


var container = $('body');
var table = $('<table></table>');

var head = $("<tr />");
var keys = Object.keys(data[0]);
keys.forEach(function(key){
	head.append($("<th>" + key + "</th>"))
})
table.append(head);


data.forEach(function(datarow) {
  var row = $("<tr />");
  for (var item in datarow) {
    row.append($("<td>" + datarow[item] + "</td>"));
  }
  table.append(row);
});
container.append(table);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

你可以做的是，你必须创建和HTML结构，这样所有的结果都会逐行显示，为此您可以按照表格结构进行操作。

检查此代码。

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    </head>
    <body>        
    </body>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                url: "data.json",
                error : function(that, e) {                    
                    console.log(e);
                },
                success : function(data) {
                    var Mytable = "<table>";
                    $.each(data, function(temp, res) {
                      Mytable += 
                              '<tr>\n\
                                    <td>' + res.id + '</td>\n\
                                    <td>' + res.name + '</td>\n\
                                    <td>' + res.age + '</td>\n\
                                    <td>' + res.feedback + '</td>\n\
                                <tr>';
                    });
                    Mytable += '</table>';
                    $('body').append(Mytable);                    
                }
            }); 
        });
    </script>
</html>

无法在jquery中以表格形式打印json内容

3 个答案: