HTMLTableSectionElement: phương thức insertRow()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Phương thức insertRow() của giao diện HTMLTableSectionElement chèn một hàng mới (<tr>) vào phần tử phân đoạn bảng đã cho (<thead>, <tfoot>, hoặc <tbody>), sau đó trả về tham chiếu đến hàng mới này.
Note:
insertRow() chèn hàng trực tiếp vào phần. Hàng không cần được thêm riêng như sẽ là trường hợp nếu Document.createElement() đã được sử dụng để tạo phần tử <tr> mới.
Cú pháp
insertRow()
insertRow(index)
Tham số
indexOptional-
Chỉ mục hàng của hàng mới. Nếu
indexlà-1hoặc bằng số hàng, hàng sẽ được thêm vào là hàng cuối cùng. Nếuindexbị bỏ qua, mặc định là-1.
Giá trị trả về
Một HTMLTableRowElement tham chiếu đến hàng mới.
Ngoại lệ
IndexSizeErrorDOMException-
Được ném nếu
indexlớn hơn số hàng, hoặc nhỏ hơn-1.
Ví dụ
Trong ví dụ này, hai nút cho phép bạn thêm và xóa hàng khỏi phần body của bảng; nó cũng cập nhật phần tử <output> với số hàng hiện có trong bảng.
HTML
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>X</td>
<td>Y</td>
<td>Z</td>
</tr>
</tbody>
</table>
<button id="add">Add a row</button>
<button id="remove">Remove last row</button>
<div>This table's body has <output>1</output> row(s).</div>
JavaScript
// Obtain relevant interface elements
const bodySection = document.querySelectorAll("tbody")[0];
const rows = bodySection.rows; // The collection is live, therefore always up-to-date
const rowNumberDisplay = document.querySelectorAll("output")[0];
const addButton = document.getElementById("add");
const removeButton = document.getElementById("remove");
function updateRowNumber() {
rowNumberDisplay.textContent = rows.length;
}
addButton.addEventListener("click", () => {
// Add a new row at the end of the body
const newRow = bodySection.insertRow();
// Add cells inside the new row
["A", "B", "C"].forEach(
(elt) => (newRow.insertCell().textContent = `${elt}${rows.length}`),
);
// Update the row counter
updateRowNumber();
});
removeButton.addEventListener("click", () => {
// Delete the row from the body
bodySection.deleteRow(-1);
// Update the row counter
updateRowNumber();
});
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| HTML # dom-tbody-insertrow |