首页 > 解决方案 > javascript循环数组和对象数据在一张表中

问题描述

我有数组和对象数据,我想将它们一起调用。

var data = [
{"number": "PA1234","name": "John"},
{"number": "JM344","name": "jessi"},
{"number": "ML567","name": "Monty"}
];

var costing= {
"cost": 10,
"cost": 20,
"cost": 30,
};

表格显示格式

<pre>
<table>
<tr>
<td>number</td>
<td>name</td>
<td>cost</td>
</tr>
</table>
<pre>

到目前为止我已经完成了,但不知道如何调用对象成本核算

var records=$("<table/>").attr("id","tabs");
$("#table").append(records);
for(var j=0;j<data .length;j++)
{
  var tr="<tr>";
  var td1="<td>"+data [j]["number"]+"</td>";
  var td2="<td>"+data [j]["name"]+"</td>";

  $("#tabs").append(tr+td1+td2+td3); 
}

标签: javascripthtmljson

解决方案


<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <title>

        </title>
        <style>
            #t, tr, th, td{
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <table id="t" cellpadding="10">
            <tr>
                <th>
                    Number
                </th>
                <th>
                    Name
                </th>
                <th>
                    Cost
                </th>
            </tr>
        </table>
    </body>
    <script>
        var number = ['PA1234', 'JM344', 'ML567'], name = ['John', 'Jessi', 'Monty'], costing = [30, 30, 30];
        for(var i=0;i<3;i++) {
            $("#t").append('<tr><td>' + number[i] + '</td><td>' + name[i] + '</td><td>' + costing[i] + '</td></tr>');
        }
    </script>
</html>

这就是你想要的


推荐阅读