Đối tượng Table trong HTML DOM đại diện cho phần tử <table> trong tài liệu HTML. Nó cung cấp các thuộc tính và phương thức để thao tác động với bảng: tạo/xóa caption, thead, tfoot, hàng (row), ô (cell).
Tạo đối tượng Table
document.createElement("TABLE");
Các thuộc tính chính
| Thuộc tính | Mô tả |
|---|---|
| caption | Trả về phần tử <caption> của bảng (nếu có). |
| tFoot | Trả về phần tử <tfoot> của bảng. |
| tHead | Trả về phần tử <thead> của bảng. |
Các phương thức chính
| Phương thức | Mô tả |
|---|---|
| createCaption() | Tạo phần tử <caption> rỗng và thêm vào bảng. |
| createTFoot() | Tạo phần tử <tfoot> rỗng và thêm vào bảng. |
| createTHead() | Tạo phần tử <thead> rỗng và thêm vào bảng. |
| deleteCaption() | Xóa phần tử <caption> đầu tiên của bảng. |
| deleteRow(index) | Xóa hàng <tr> tại chỉ số index. |
| deleteTHead() | Xóa phần tử <thead> của bảng. |
| deleteTFoot() | Xóa phần tử <tfoot> của bảng. |
| insertRow(index) | Tạo hàng <tr> rỗng và chèn vào vị trí index. |
Ví dụ minh họa
Tạo bảng động hoàn toàn bằng JavaScript khi nhấn nút:
<!DOCTYPE html>
<html>
<head>
<style>
body { text-align: center; background-color: #fff; color: #0197F6; }
h1 { color: #23CE6B; }
.btn {
background-color: #fff;
border: 1.5px dashed #0197F6;
height: 2rem;
border-radius: 2px;
width: 60%;
margin: 2rem auto;
display: block;
color: #0197F6;
outline: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Demo đối tượng Table trong DOM</h1>
<button onclick="taoBang()" class="btn">Tạo đối tượng bảng</button>
<script>
function taoBang() {
var table = document.createElement("TABLE");
table.innerHTML = `
<tr> <td>Dữ liệu 1</td> <td>Dữ liệu 2</td> </tr>
<tr> <td>Dữ liệu 3</td> <td>Dữ liệu 4</td> </tr>
`;
table.setAttribute('border', "2");
table.style.margin = "2rem auto";
document.body.appendChild(table);
}
</script>
</body>
</html>
Kết quả
Ban đầu chỉ có nút bấm. Sau khi nhấn "Tạo đối tượng bảng", một bảng 2x2 với viền xuất hiện ở giữa trang.
Mẹo: Các phương thức insertRow(), deleteRow() hoạt động trên chính đối tượng table, không cần truy xuất tbody. Để thao tác ô (cell), dùng row.insertCell(), row.deleteCell().