ในตัวอย่างนี้ผมสร้าง Table ง่ายๆเพื่อเอาไว้ทดลอง
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| John | Doe | 80 |
เขียนเป็น Code HTML ได้ดังนี้ครับ
<table style="width:300px" id="tableTargetTest" border="1">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
ในตัวอย่างนี้ผมสร้าง table โดยกำหนด id ว่า tableTargetTest เพราะฉนั้นเราจะใช้ JQuery อ้างอิงจาก id นี้เพื่อปิด Column ที่สองที่มีข้อมูล Smith Jackson Doe ออก
เขียนเป็น Code JQuery ได้ดังนี้ครับ
$('#tableTargetTest td:nth-child(2)').hide()
อธิบาย Code นิดหนึงว่า
เราอ้างอิง table ด้วย id ที่ชื่อว่า tableTargetTest เพราะฉนั้น Code เราเลยเขียนได้ว่า $('#tableTargetTest') ต่อจากนั้นเราต้องการจะปิด Column แน่นอนว่าเราต้องอ้างอิงจาก td เราเลยเพิ่มเติม Code เรานิดหน่อยเป็น $('#tableTargetTest td') แต่ Code นี้เป็นการอ้างอิงถึง td ทั้งหมด เราสามารถแยกให้เอาแต่ td ตัวที่แสดงเป็น Column ที่ 2 ใน table นี้ได้โดยเพิ่มเติม Code ด้วย nth-child(2) ซึ่งหมายถึง ให้เอาทุกๆตัวที่เป็นอันดับ 2 ที่เป็นโหนดลูกทั้งหมดมาซึ่งจะได้ Code ดังนี้ $('#tableTargetTest td:nth-child(2)') จากนั้นจะทำอะไรต่อก็แล้วแต่กันละครับ แต่ผมในทีนี้จะขอปิดให้แสดง Column นี้ด้วยฟังก์ชั่น hide()
สามารถฝึกปิด Column ที่เป็นเทคนิคที่ยากขึ้นไปได้ใน Post ด้านล่างนี้ครับ
JQuery ปิด Column ขั้นสูงแบบฝึกหัดแบบยากขึ้น
ไม่มีความคิดเห็น:
แสดงความคิดเห็น