右侧。所以，伙计们，我陷入了一个简单的问题，我一辈子都无法解决。我试图使用JavaScript在引导表的末尾插入一个新行(使用AJAX调用的响应数据(。我使用的是这样一个简单的函数；
function insertRow(data) {
let tbody = document.querySelector('tbody');
let spacer = document.createElement('tr');
let tr = document.createElement('tr');
// append rows to table
tbody.appendChild(spacer);
tbody.appendChild(tr);
// apply styles
tr.className = 'rounded-3 card-body shadow-sm reg-rows';
spacer.className = 'spacer';
spacer.style.height = '6px';
let id_input = document.createElement("input");
spacer.appendChild(id_input);
id_input.value = `${data.identifier}`;
id_input.name = "keys_array[]";
id_input.type = "hidden";
let cells_array = new Array();
// create cells
var td_id, td_ba, td_code, td_num;
td_id = td_ba = td_code = td_num = document.createElement('td');
// append cells to row
tr.append(td_id, td_ba, td_code, td_num);
// add cells to array
cells_array.push(td_id, td_ba, td_code, td_num);
Array.prototype.slice.call(cells_array)
.forEach(function(cell) {
cell.className = "p-1 border-0";
tr.appendChild(cell);
});
td_status.classList.add("rounded-end");
let div = document.createElement("div");
let input = document.createElement("input");
input.className = "form-check-input position-static";
input.name = "some_action[]";
input.type = "checkbox";
div.appendChild(input);
td_status.appendChild(div);
// write text to cells
td_id.innerHTML = `${data.id}`;
td_ba.innerHTML = `${data.ba}`;
td_code.innerHTML = `${data.code}`;
td_num.innerHTML = `${data.num}`;
}
问题是，当我调用函数时，只有最后一个单元格(在本例中为td_num(被插入到新创建的行中，并且它是作为第一个单元格插入的。
我尝试过使用appendChild将每个单元格单独附加到新行，但也没有。
我甚至试图改变创建和附加单元格的顺序，但没有成功。我可能做错了什么？谢谢
您在这一行中为一个相同的Element创建了3个引用：
td_id = td_ba = td_code = td_num = document.createElement('td');
也就是说，这里创建的唯一document.createElement('td')可以用td_id、td_ba和td_code调用。您在这里没有创建3个td，只有一个有3个引用。
如果你想创建3个元素，你需要为每个变量创建它们
[ td_id, td_ba, td_code ].map(myVarRef => myVarRef = document.createElement('td'))
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
<script>
function insertRow() {
let data = [{
cell1: "3",
cell2: "Item 3",
cell3: "$3"
}, {
cell1: "4",
cell2: "Item 4",
cell3: "$4"
}];
// I choose table body over table by adding an ID specifically
let table_body = document.getElementById("tbody_id");
for (let i = 0; i < data.length; i++) {
// Create an empty <tr> element and add it to the last position of the table:
let row = table_body.insertRow(-1);
// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
let cell1 = row.insertCell(0);
let cell2 = row.insertCell(1);
let cell3 = row.insertCell(2);
// Add some text to the new cells:
cell1.innerHTML = data[i].cell1;
cell2.innerHTML = data[i].cell2;
cell3.innerHTML = data[i].cell3;
}
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3">
<button type="button" onclick="insertRow()" class="btn btn-primary">Click Me</button>
</div>
</div>
<div class="row">
<div class="col-sm">
<table data-toggle="table" id="test-table">
<thead>
<tr>
<th>Item ID</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody id="tbody_id">
<tr>
<td>1</td>
<td>Item 1</td>
<td>$1</td>
</tr>
<tr>
<td>2</td>
<td>Item 2</td>
<td>$2</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
我创建了一个可以直接运行的示例，希望这能有所帮助。为了更好地理解，我在代码中添加了注释，同时插入了一行，您可以给-1，将其附加到表体的底部。