HTMLTableElement: 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 HTMLTableElement chèn một hàng mới (<tr>) vào một <table> đã cho và trả về tham chiếu đến hàng mới.
Nếu một bảng có nhiều phần tử <tbody>, theo mặc định hàng mới sẽ được chèn vào <tbody> cuối cùng.
Để chèn hàng vào một phần cụ thể, hãy dùng HTMLTableSectionElement.insertRow()
Note:
insertRow() chèn hàng trực tiếp vào bảng. Hàng không cần được thêm riêng lẻ như trường hợp khi dùng Document.createElement() để tạo phần tử <tr> mới.
Cú pháp
insertRow()
insertRow(index)
HTMLTableElement là tham chiếu đến phần tử <table> HTML.
Tham số
indexOptional-
Chỉ số hàng của hàng mới. Nếu
indexlà-1hoặc bằng số lượng hàng, hàng sẽ được thêm vào cuối cùng. Nếu bỏ quaindex, giá trị 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ố lượng hàng.
Ví dụ
Ví dụ này dùng insertRow(-1) để thêm một hàng mới vào cuối bảng.
Sau đó chúng ta dùng HTMLTableRowElement.insertCell() để chèn một ô mới vào hàng mới. (Để HTML hợp lệ, một <tr> phải có ít nhất một phần tử <td>.) Cuối cùng, chúng ta thêm một số văn bản vào ô bằng Document.createTextNode() và Node.appendChild().
HTML
<table id="my-table">
<tbody>
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
</tbody>
</table>
JavaScript
function addRow(tableID) {
// Get a reference to the table
let tableRef = document.getElementById(tableID);
// Insert a row at the end of the table
let newRow = tableRef.insertRow(-1);
// Insert a cell in the row at index 0
let newCell = newRow.insertCell(0);
// Append a text node to the cell
let newText = document.createTextNode("New bottom row");
newCell.appendChild(newText);
}
// Call addRow() with the table's ID
addRow("my-table");
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| HTML # dom-table-insertrow-dev |