เมธอด deleteTHead() คืออะไร?
เมธอด deleteTHead() ของออบเจ็กต์ตาราง (HTMLTableElement) ใช้ **ลบเอลิเมนต์ <thead>** ออกจากตาราง หากตารางไม่มี <thead> เมธอดนี้จะไม่ทำอะไร (ไม่โยน Error)
รูปแบบการใช้งาน (Syntax)
tableElement.deleteTHead()
ไม่มีพารามิเตอร์, ไม่คืนค่า (undefined)
ตัวอย่าง: ลบหัวตาราง
<!DOCTYPE html>
<html>
<style>
body { color: #000; background: lightblue; height: 100vh; text-align: center; }
table { margin: 2rem auto; border-collapse: collapse; }
th, td { border: 1px solid #333; padding: 8px; }
caption { color: #db133a; font-weight: bold; padding: 0.5rem; }
.btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem auto; }
เมธอดคู่ควร: createTHead()
หากต้องการสร้าง <thead> ใหม่หลังลบ ใช้ createTHead():
var thead = table.createTHead(); // สร้าง thead ใหม่ (หรือดึงที่มีอยู่)
thead.innerHTML = '<tr><th>หัวข้อใหม่ 1</th><th>หัวข้อใหม่ 2</th></tr>';
เมธอดจัดการส่วนของตาราง (สรุป)
| ส่วน | สร้าง (Create) | ลบ (Delete) |
|---|---|---|
<caption> | createCaption() | deleteCaption() |
<thead> | createTHead() | deleteTHead() |
<tfoot> | createTFoot() | deleteTFoot() |
<tbody> | createTBody() (ไม่มีในมาตรฐาน ใช้ insertRow() แทน) | - (ลบแถวด้วย deleteRow()) |
ข้อควรระวัง
deleteTHead()ลบ **ทั้งหมด**<thead>(มีได้สูงสุด 1 ต่อตาราง)- แถวใน
<thead>จะถูกลบไปพร้อมกัน - ไม่สามารถ Undo ได้ ต้องสร้างใหม่ด้วย
createTHead()และใส่เนื้อหาเอง - ใช้งานได้เฉพาะตารางที่สร้างด้วย
<table>เท่านั้น
กรณีใช้งานจริง
- **Toggle Header:** ซ่อน/แสดงหัวตารางตามเงื่อนไข (เช่น Mobile view)
- **Dynamic Table:** สร้างตารางใหม่ทุกครั้ง ใช้
deleteTHead()ลบเก่าก่อนสร้างใหม่ - **Print Version:** ลบ header/footer ก่อนพิมพ์ แล้วสร้างใหม่หลังพิมพ์
