我有数组和对象数据，我想将它们一起调用。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); }
2 回答
哆啦的时光机
TA贡献1779条经验 获得超6个赞
<!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>
HUWWW
TA贡献1874条经验 获得超12个赞
不得不用你的第二个对象改变一些东西，成本。我认为您不能在不同的值上使用相同的键名，您将无法迭代它们。现在你可以做两种方法：
var data = [
{"number": "PA1234","name": "John"},
{"number": "JM344","name": "jessi"},
{"number": "ML567","name": "Monty"}
];
var costing = {
"cost0": 10,
"cost1": 20,
"cost2": 30,
};
document.addEventListener("DOMContentLoaded", () => {
const place = document.getElementById("place").firstElementChild
const table = document.createElement("table")
for(let i = 0; i < data.length; i++){
let tr = document.createElement("tr")
let tdNumber = document.createElement("td")
let tdName = document.createElement("td")
let tdCost = document.createElement("td")
tdNumber.innerText = data[i].number
tdName.innerText = data[i].name
tdCost.innerText = costing["cost"+i]
tr.appendChild(tdNumber)
tr.appendChild(tdName)
tr.appendChild(tdCost)
table.appendChild(tr)
}
place.appendChild(table)
})
但是我个人会将您的成本核算对象更改为：
var costing2 = [
10,20,30
]
并将for循环更改为：
for(let i = 0; i < data.length; i++){
let tr = document.createElement("tr")
let tdNumber = document.createElement("td")
let tdName = document.createElement("td")
let tdCost = document.createElement("td")
tdNumber.innerText = data[i].number
tdName.innerText = data[i].name
tdCost.innerText = costing2[i]
tr.appendChild(tdNumber)
tr.appendChild(tdName)
tr.appendChild(tdCost)
table.appendChild(tr)
}
where place 是 html 中 div 标签的位置。不是最好的解决方案，但它可以工作，如果你想要的话，也可以放下 html 代码：
<html>
<head>
<script src="./file.js"></script>
</head>
<body>
<div id="place">
<pre>
</pre>
</div>
</body>
</html>
添加回答
举报
0/150
提交
取消