[英]How do I formulate my for-loop code to insert values in specific html table cells?
I am having issues inserting values from an object into a dynamically generated HTML table. 我在将对象的值插入动态生成的HTML表中时遇到问题。
Find below my simple HTML code: 在下面找到我的简单HTML代码:
<table id="table" border="1">
<tr>
<th>Number</th>
<th>Amount</th>
<th>Status</th>
</tr>
</table>
I am dynamically populating the table above using values from an object. 我使用对象的值动态填充上面的表。 The object is generated from saved values in the
localStorage
. 该对象是根据
localStorage
保存的值生成的。
Find inline my javascript code along with my comments and explanation: 查找内联我的JavaScript代码以及我的评论和说明:
var array = JSON.parse(localStorage.getItem('transactionData'));
console.log(array);
The console.log(array)
as seem above, correctly yields: 如上所示,
console.log(array)
正确产生:
table = document.getElementById("table");
for(var i = 0; i < array.length; i++)
{
console.log("Number of transactions: " +array.length);
var newRow = table.insertRow(table.length);
var x;
for (x in array)
{
var cell = newRow.insertCell(x);
cell.innerHTML += array[x].payersNumber;
}
}
My main issue seems to be within the scope of the second for-loop. 我的主要问题似乎在第二个 for循环的范围内。 I'd like for the code here to populate every row in the table with (in this order) the Number, Amount then finally the Status .
我想要这里的代码来填充表中的每一行(按此顺序): 数字,金额,最后是状态 。
The code in the second for-loop above erroneously fills in every cell in the table with phone numbers, and also adds additional columns as seen in the image below 上面第二个for循环中的代码错误地用电话号码填充了表格中的每个单元格,并且还添加了其他列,如下图所示
Kindly help me understand how I can correctly formulate my code to populate every row with the Number, Amount and the Status values from the object. 请帮助我理解如何正确地编写代码,以用对象的数字,金额和状态值填充每一行。
Looking forward to your help. 期待您的帮助。
As you suspected the problem lies here: 您怀疑问题出在这里:
for (x in array)
{
var cell = newRow.insertCell(x);
cell.innerHTML += array[x].payersNumber;
}
According to the structure of your array each element is an object with six keys - your table just has three rows though - so it adds two additional cells which get populated from a non-existing entry in the object which makes it undefined . 根据数组的结构,每个元素都是一个具有六个键的对象-尽管表只有三行-因此它添加了两个额外的单元格,这些单元格是从对象中不存在的条目填充的,从而使其未定义 。
I'd recommend adding the keys you want to be displayed inside the table in an array like (reflecting the order of your table): 我建议您将要显示在表中的键添加为一个数组(反映表的顺序):
var keys=["payersNumber","amount","paymentStatus"];
This way you can iterate over the keys inside the for-loop and populate the correct cells. 这样,您可以遍历for循环内的键并填充正确的单元格。
Here's an example: 这是一个例子:
var array = [{ amount: 12, payersNumber: 1245, paymentStatus: "okay" }, { amount: 24, payersNumber: 3345, paymentStatus: "okay" }, { amount: 45, payersNumber: 4534, paymentStatus: "not okay" }]; table = document.getElementById("table"); var currentTransaction; var keys = ["payersNumber", "amount", "paymentStatus"]; for (var i = 0; i < array.length; i++) { console.log("Number of transactions: " + array.length); var newRow = table.insertRow(table.length); currentTransaction = array[i]; for (var b = 0; b < keys.length; b++) { var cell = newRow.insertCell(b); cell.innerText = currentTransaction[keys[b]]; } }
<table id="table" border="1"> <tr> <th>Number</th> <th>Amount</th> <th>Status</th> </tr> </table>
for(x in array), you are accessing the array, not the objects inside the array. for(x in array),您正在访问数组,而不是数组内部的对象。
Try something like: 尝试类似的方法:
var table = document.getElementById("table");
console.log("Number of transactions: " + array.length);
for (var i = 0; i < array.length; i++) {
var newRow = table.insertRow(table.length);
var currentTransactionLength = Object.keys(array[i]).length;
var currentTransactionObject = array[i];
for (var x = 0; x < currentTransactionLength; x++) {
var cell = newRow.insertCell(x);
cellContents = currentTransactionObject[Object.keys(currentTransactionObject)[x]];
cell.innerHTML += cellContents;
}
}
This way you are accessing the array on the first loop and then each object of that array on the second loop. 这样,您将在第一个循环上访问该数组,然后在第二个循环上访问该数组的每个对象。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.