gpt4 book ai didi

javascript - 如何使用javascript为多行动态地将数据分配给表的?

转载 作者:行者123 更新时间:2023-11-30 21:04:37 31 4
gpt4 key购买 nike

我坚持标题中提到的问题陈述。我有一个场景,我在单击按钮时获得逗号分隔的数据,我想使用 javascript 将该数据分配给 tabletd 元素。

请引用以下代码:

// Consider we have data in comma split format in x array.
// For ex: the data in x array is {1,2,3}{4,5,6}{7,8,9} i.e. 3rows
// Now I want to assign that to td1, td2 and td3 of the table
// In function I'm looping the data as below where I'm directly assigning
// the data to the td1,td2,td3 id of the table.

for (i = 0; i < x.length; i++) {
// alert(x[i]);
document.getElementById('td1').innerHTML = x[i++];
document.getElementById('td2').innerHTML = x[i++];
document.getElementById('td3').innerHTML = x[i++];
}

问题是当我分配数据时,没有创建新行。相反,新行正在替换旧行数据。该表的 HTML 代码如下。

<html>
<body>
<table class='tbl-qa'>
<thead>
<tr>
<th class='table-header' width='20%'>Title</th>
<th class='table-header' width='40%'>Description</th>
<th class='table-header' width='20%'>Date</th>
</tr>
</thead>
<tbody id='table-body'>
<tr class='table-row' id = 'table-row'>
<td id = 'td1'>''</td>
<td id = 'td2'>''</td>
<td id = 'td3'>''</td>
</tr>
</tbody>
</table>
</body>
</html>

谁能帮我解决这个问题?注意 - 我想强制将数据分配给 table-row div 的 td

最佳答案

你的数据对我来说没有意义,它是无效的。我现在只是将其设置为 3 个字符串,如果不能接受,您可以告诉我。这是动态设置 <td> 的方法元素到一行

var data = ["1,2,3","4,5,6","7,8,9"];
for (i=0; i < data.length; i++){
var td = document.createElement('td'); // create a td node
td.innerHTML = data[i]; // fill the td now with a piece of the data array
document.getElementById("table-row").appendChild(td); // append the td element to the row
}
<table class='tbl-qa'>
<thead>
<tr>
<th class='table-header' width='20%'>Title</th>
<th class='table-header' width='40%'>Description</th>
<th class='table-header' width='20%'>Date</th>
</tr>
</thead>
<tbody id='table-body'>
<tr class='table-row' id = 'table-row'></tr>
</tbody>
</table>

关于javascript - 如何使用javascript为多行动态地将数据分配给表的<td>?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46773633/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com