เมธอด deleteTFoot() คืออะไร?
เมธอด deleteTFoot() ของออบเจ็กต์ตาราง (HTMLTableElement) ใช้ **ลบเอลิเมนต์ <tfoot>** ออกจากตาราง หากตารางไม่มี <tfoot> เมธอดนี้จะไม่ทำอะไร (ไม่โยน Error)
รูปแบบการใช้งาน (Syntax)
tableElement.deleteTFoot()
ไม่มีพารามิเตอร์, ไม่คืนค่า (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; }
เมธอดคู่ควร: createTFoot()
หากต้องการสร้าง <tfoot> ใหม่หลังลบ ใช้ createTFoot():
var tfoot = table.createTFoot(); // สร้าง tfoot ใหม่ (หรือดึงที่มีอยู่)
tfoot.innerHTML = '<tr><td colspan="2">ท้ายตารางใหม่</td></tr>';
ความสำคัญของ <tfoot>
- วางได้ **ก่อน**
<tbody>ใน HTML (HTML5 อนุญาต) แต่เบราว์เซอร์จะแสดง **ท้ายตาราง** เสมอ - ใช้สำหรับ **สรุปผลรวม (Totals)**, **ค่าเฉลี่ย**, **หมายเหตุ** ท้ายตาราง
- เมื่อพิมพ์ตารางหลายหน้า
<tfoot>จะแสดงท้ายทุกหน้า (ถ้าเบราว์เซอร์รองรับ)
เมธอดจัดการส่วนของตาราง (สรุป)
| ส่วน | สร้าง (Create) | ลบ (Delete) |
|---|---|---|
<caption> | createCaption() | deleteCaption() |
<thead> | createTHead() | deleteTHead() |
<tfoot> | createTFoot() | deleteTFoot() |
<tbody> | createTBody() (ไม่มีมาตรฐาน) | - |
ข้อควรระวัง
deleteTFoot()ลบ **ทั้งหมด**<tfoot>(มีได้สูงสุด 1 ต่อตาราง)- แถวใน
<tfoot>จะถูกลบไปพร้อมกัน - ไม่สามารถ Undo ได้ ต้องสร้างใหม่ด้วย
createTFoot() - แตกต่างจาก
deleteRow()ที่ลบแถวเดี่ยวได้
กรณีใช้งานจริง
- **สลับโหมดสรุป:** ซ่อน/แสดงแถวรวมยอด (Totals)
- **Dynamic Reporting:** สร้างรายงานใหม่ ลบ tfoot เก่าก่อนสร้างใหม่
- **Responsive Table:** บนมือถืออาจซ่อน tfoot เพื่อพื้นที่
