我的網(wǎng)頁上有一個(gè)表格，我希望使用 JavaScript 對(duì)其進(jìn)行更改。我的主要目標(biāo)是將 2 個(gè) TD 添加到新行。不知何故，運(yùn)行我的代碼后會(huì)插入一個(gè)新行，但所有數(shù)據(jù)都在 TD 上，為什么？var table2 = document.getElementById("testsPieArea");var rowCounter = table2.rows.length;var i;for (i = 0; i < 2; i++) { var row = table2.insertRow(rowCounter); var cell1 = row.insertCell(0); var cellData = "<tr>"; cellData += "<td> Info1 </td><td> Info2 </td></tr>"; cell1.innerHTML = cellData; rowCounter++;}在現(xiàn)實(shí)生活中，會(huì)看到創(chuàng)建了 2 行，但其中寫入了“info1info2”，這不是我所要求的。
2 回答
手掌心
TA貢獻(xiàn)1942條經(jīng)驗(yàn) 獲得超3個(gè)贊
cell1（由 創(chuàng)建HTMLTableRowElement.insertCell()）引用單元格 (?td?)，而不是row。您應(yīng)該插入行：
row.innerHTML = cellData;
var table2 = document.getElementById("testsPieArea");
var rowCounter = table2.rows.length;
for (var i = 0; i < 2; i++) {
? var row = table2.insertRow(rowCounter);
? var cellData = "<tr><td> Info1 </td><td> Info2 </td></tr>";
? row.innerHTML = cellData;
? rowCounter++;
}
table, td {
? border: 1px solid black;
}
<table id="testsPieArea"></table>
阿波羅的戰(zhàn)車
TA貢獻(xiàn)1862條經(jīng)驗(yàn) 獲得超6個(gè)贊
如果要添加具有兩個(gè)值的新行，您可以創(chuàng)建元素并設(shè)置它們，然后textContent再將它們添加為子元素。
insertRow(document.querySelector('#my-table'), [ 'A', 'B' ]);
function insertRow(table, data) {
let tbody = table.querySelector('tbody'),
tr = document.createElement('tr');
data.forEach(value => {
let td = document.createElement('td');
td.textContent = value;
tr.appendChild(td);
});
tbody.appendChild(tr);
}
table {
border-collapse: collapse;
}
table,
th,
td {
border: thin solid grey;
}
th,
td {
text-align: center;
padding: 0.25em;
}
<table id="my-table">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
</tr>
</tbody>
</table>
- 2 回答
- 0 關(guān)注
- 184 瀏覽
添加回答
舉報(bào)
0/150
提交
取消