如何将数据动态分配到表的多行使用JavaScript？
我被标题中提到的问题陈述卡住了。我有一个场景，我得到一个按钮单击逗号分隔的数据，我想使用javascript将该数据分配给表的td元素。如何将数据动态分配到表的多行使用JavaScript？
请参考下面的代码：
// 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>
任何人都可以帮我解决这个问题吗？ 注 - 我想强制分配数据到表格行 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>你的新行将总是与当前设置替换旧行。
这是因为您正在引用“td1”，“td2”和“td3”，因为它们应该只在您的脚本中出现一次。你需要动态的ID才能完成这项工作。
例如，你可以做到这一点在PHP中，有：（这个例子不包括逃生功能，这是需要安全原因）
$query = "SELECT * FROM example";
$get_example_query = mysqli_query($connection, $query);
while($row = mysqli_fetch_assoc($get_example_query)){
$id = $row['id']
$content = $row['content'];
echo "<tr>";
echo "<td id="$id">$content</td>";
echo "</tr>;
}
如果你使用mysqli，你不应该使用'escape fucntion'，你应该准备好你的语句。 – IsThisJavascript
与此答案无关，因为我明确表示不包括在内。 – cmprogram
我只是为了你自己的安全而告诉你。逃生功能！=准备 – IsThisJavascript
我假设你的数据如下所示：
[{
title: 'Title',
description: 'Description',
date: 'Date'
}, {
// ...
}]
您可以动态创建您的<td>元素，而无需将它们添加到HTML中。创建将发生在数据循环内部。
let data = [{
title: 'T1',
description: 'D1',
date: 'DT1'
}, {
title: 'T2',
description: 'D2',
date: 'DT2'
}, {
title: 'T3',
description: 'D3',
date: 'DT3'
}];
let tbody = document.getElementById('table-body');
let tr, td;
data.forEach((element) => {
tr = document.createElement('tr');
for (let key in element) {
if (element.hasOwnProperty(key)) {
td = document.createElement('td');
td.innerHTML = element[key];
tr.appendChild(td);
}
}
tbody.appendChild(tr);
});<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"></tbody>
</table>
</body>
</html>希望这有助于。
您的数据对我没有意义，它无效。我现在只是把它放到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>
你的新行将总是与当前设置替换旧行。
这是因为您正在引用“td1”，“td2”和“td3”，因为它们应该只在您的脚本中出现一次。你需要动态的ID才能完成这项工作。
例如，你可以做到这一点在PHP中，有：（这个例子不包括逃生功能，这是需要安全原因）
$query = "SELECT * FROM example";
$get_example_query = mysqli_query($connection, $query);
while($row = mysqli_fetch_assoc($get_example_query)){
$id = $row['id']
$content = $row['content'];
echo "<tr>";
echo "<td id="$id">$content</td>";
echo "</tr>;
}
如果你使用mysqli，你不应该使用'escape fucntion'，你应该准备好你的语句。 – IsThisJavascript
与此答案无关，因为我明确表示不包括在内。 – cmprogram
我只是为了你自己的安全而告诉你。逃生功能！=准备 – IsThisJavascript
我假设你的数据如下所示：
[{
title: 'Title',
description: 'Description',
date: 'Date'
}, {
// ...
}]
您可以动态创建您的<td>元素，而无需将它们添加到HTML中。创建将发生在数据循环内部。
let data = [{
title: 'T1',
description: 'D1',
date: 'DT1'
}, {
title: 'T2',
description: 'D2',
date: 'DT2'
}, {
title: 'T3',
description: 'D3',
date: 'DT3'
}];
let tbody = document.getElementById('table-body');
let tr, td;
data.forEach((element) => {
tr = document.createElement('tr');
for (let key in element) {
if (element.hasOwnProperty(key)) {
td = document.createElement('td');
td.innerHTML = element[key];
tr.appendChild(td);
}
}
tbody.appendChild(tr);
});<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"></tbody>
</table>
</body>
</html>希望这有助于。
那里只有3个td元素。你希望总共有9个吗？用
回答
您的数据对我没有意义，它无效。我现在只是把它放到3个字符串中，如果这是不可接受的，你可以告诉我。这里是你如何可以动态设置
<td>元素行你的新行将总是与当前设置替换旧行。
这是因为您正在引用“td1”，“td2”和“td3”，因为它们应该只在您的脚本中出现一次。你需要动态的ID才能完成这项工作。
例如，你可以做到这一点在PHP中，有：（这个例子不包括逃生功能，这是需要安全原因）
如果你使用mysqli，你不应该使用'escape fucntion'，你应该准备好你的语句。 – IsThisJavascript
与此答案无关，因为我明确表示不包括在内。 – cmprogram
我只是为了你自己的安全而告诉你。逃生功能！=准备 – IsThisJavascript
我假设你的数据如下所示：
您可以动态创建您的
<td>元素，而无需将它们添加到HTML中。创建将发生在数据循环内部。希望这有助于。
相关问题