HTMLTableSectionElement: phương thức deleteRow()
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 deleteRow() của giao diện HTMLTableSectionElement xóa một hàng cụ thể (<tr>) khỏi một <section> đã cho.
Cú pháp
js
deleteRow(index)
Tham số
index-
indexlà số nguyên đại diện cho hàng cần xóa. Tuy nhiên, chỉ mục đặc biệt-1có thể được sử dụng để xóa hàng cuối cùng của phần.
Giá trị trả về
Không có (undefined).
Ngoại lệ
IndexSizeErrorDOMException-
Được ném nếu
indexlớn hơn hoặc bằng số hàng có sẵn hoặc là giá trị âm khác-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
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
js
// 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-deleterow |