Phương thức deleteTHead() của đối tượng HTMLTableElement xóa phần tử <thead> (nếu có) khỏi bảng. Nếu bảng không có <thead>, phương thức không làm gì (không báo lỗi).
Cú pháp
tableElement.deleteTHead()
Ví dụ: Xóa header bảng
<!DOCTYPE html>
<html>
<style>
body { color: #000; background: lightblue; height: 100vh; text-align: center; }
table { margin: 2rem auto; border-collapse: collapse; }
.btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem auto; }
<body>
<h1>Demo: table.deleteTHead()</h1>
<table border="2" id="demoTable">
<thead>
<tr><th>Tên</th><th>Mã SV</th></tr>
</thead>
<tbody>
<tr><td>An</td><td>071717</td></tr>
<tr><td>Bình</td><td>031717</td></tr>
</tbody>
</table>
<button onclick="removeHead()" class="btn">Xóa Header</button>
<script>
function removeHead() {
var table = document.getElementById('demoTable');
table.deleteTHead();
// Header biến mất, tbody lên đầu
}
</script>
</body>
</html>
Kết quả:
- Ban đầu: Bảng có header "Tên | Mã SV" (in đậm, nền xám mặc định).
- Sau khi nhấn "Xóa Header": Dòng header biến mất, hàng dữ liệu đầu tiên trở thành hàng đầu bảng.
- Chỉ xóa
<thead>đầu tiên (bảng chỉ có tối đa 1 thead). - Không ảnh hưởng đến
<tbody>hay<tfoot>. - Dùng khi cần thay đổi cấu trúc bảng động (ví dụ: chuyển đổi giữa xem có header/không header).
Phương thức đối ngược: createTHead()
Nếu muốn tạo lại header sau khi xóa:
var newHead = table.createTHead(); newHead.innerHTML = "<tr><th>Tên</th><th>Mã</th></tr>";