ตัวอย่าง Table
Code ตัวอย่างที่วาดตาราง
<div id="memberTable" class="tableContainer"
style="width: 845px; overflow-x: scroll">
<table width="100%" cellspacing="1"
cellpadding="0" border="0" class="table">
<thead id="fixedHeader_subAccountTable"
class="fixedHeader">
<tr class="tableHeaderRow">
<th class="tableIndexHeaderCell"><div style="width: 40px">ลำดับ</div></th>
<th class="tableCheckHeaderCell">
<div style="width: 25px">
<input
type="checkbox" value="true" id="checkAll"
onclick="checkpcTypeTableAll(this, 'tablepcTypeTableCheck')"
name="tablepcTypeTableCheckAll"
tabindex="-1"></div>
</th>
<th class="tableViewHeaderCell"><div style="width: 25px">ดู</div></th>
<th class="tableHeaderCell"><div style="width: 200px">ชื่อสมาชิก</div></th>
<th class="tableHeaderCell"><div style="width: 80px">วันที่จ่ายค่าสมาชิก<br/>ครั้งสุดท้าย</div></th>
<th class="tableHeaderCell"><div style="width: 80px">วันที่ขึ้นทะเบียน</div></th>
<th class="tableHeaderCell"><div style="width: 150px">ประเภทสมาชิกเดิม</div></th>
<th class="tableHeaderCell"><div style="width: 120px">ยอดเงินบริจาค</div></th>
<th class="tableHeaderCell"><div style="width: 100px">ที่มา</div></th>
<th class="tableHeaderCell"><div style="width: 200px">ชื่อผู้บริจาค</div></th>
</tr>
</thead>
<input type="hidden" value="0"
name="memberTable_ROWCOUNT">
<tbody id="scrollContent_subAccountTable"
class="scrollContent">
<tr class="tableEmptyCell">
<td class="tableCell" name="index"> </td>
<td class="tableCell" name="check" align="center"> </td>
<td class="tableCell" name="view"> </td>
<td class="tableCell" name="memberName"> </td>
<td class="tableCell" name="payDate"> </td>
<td class="tableCell" name="registerDate"> </td>
<td class="tableCell" name="memberTypeName"> </td>
<td class="tableCell" name="amount"> </td>
<td class="tableCell" name="memberSource"> </td>
<td class="tableCell" name="donatorName"> </td>
</tr>
</tbody>
</table>
</div>
ในตัวอย่างนี้เราต้องการให้ปิด Column "ประเภทสมาชิกเดิม" แต่สังเกตว่า แท็ก th ที่เป็นหัวข้อของคอลัม ประเภทสมาชิกเดิมนั้น ไม่มี id ระบุเลยเราจึงไม่สามารถ hide โดยวิธีโดยตรงได้
แต่เราจะอ้างอิง index จาก td ที่เป็นส่วนตารางแสดงข้อมูลจาก id แทน
Example
/*หา index จากส่วนตารางแสดงข้อมูล*/
var index = $j('#memberTable.tableContainer table tbody tr:first td').index($j("td[name=memberTypeName]"))+1;
/*ก่อนจะนำมาใช้งานต้องตรวจสอบก่อนว่าค่าที่หามาได้นั้นเจอรึเปล่า ป้องกันความผิดพลาดโปรแกรม*/
if(index>0){
/*ทำการปิดส่วนหัวของคอลัมน์*/
$j('#memberTable.tableContainer table thead tr th:nth-child('+index+')').hide();
/*ทำการปิดส่วนแสดงข้อมูลของคอลัมน์ตามไปด้วย*/
$j('#memberTable.tableContainer table tbody tr').find($j("td[name=memberTypeName]")).hide();
}
คำอธิบายเพิ่มเติม
nth-child() ไว้ใช้สำหรับหาลูกโหนดที่ n โดยเราหา index ก่อนว่าอยู่ในช่วงใด(คอลัมน์ที่เท่าไหร่)ของตารางแล้วเรานำช่วงคอลัมน์เดียวกันนั้นที่ตรงกันกับหัวคอลัมน์ทำการปิดการแสดงด้วย hide()
อีกวิธีหนึ่งที่เราสามารถอ้างอิงเพื่อปิดหัวคอลัมน์โดยตรงได้เลยโดยตรวจสอบจาก ข้อความ ที่แสดงอยู่บนหัวคอลัมน์ เนื่องจากเราต้องการปิดคอลัมน์ "ประเภทสมาชิกเดิม" ให้ใช้ JQuery map ค้นหาคอลัมน์นั้นให้อัตโนมัติ
Example
/*ใช้ JQuery ค้นหาหัวคอลัมน์นั้นออกมา innerText เป็น Attribute ที่แสดงค่า Text ใน Node นั้นๆ*/
var thead = $j("#memberTable.tableContainer table thead tr th").map(function(){
return $j.trim(this.innerText)=="ประเภทสมาชิกเดิม"?this:null;
});
/*ทำการ hide หัวคอลัมน์*/
thead.hide();
คำอธิบายเพิ่มเติม
Jquery map นั้นเป็นการกรองข้อมูลแบบหนึ่่ง โดยทำการแมพข้อมูลตามที่เราต้องการออกมาทาง return
ไม่มีความคิดเห็น:
แสดงความคิดเห็น