วันพฤหัสบดีที่ ๖ สิงหาคม พ.ศ. ๒๕๕๒

jQuery ลอง Selectors หลายๆแบบ

วันก่อนคุณ Nine ได้ post ถามเรื่องการใช้ jQuery สำหรับค้นหาข้อมูลเพื่อซ่อน table โดยหน้า html ได้มาจาก MS SharePoint ครับ ทีแรกผมเข้าใจว่า html จะมี form เป็น pattern เดียวกัน คือมีจำนวนแถวและคอลัมภ์เท่ากันเสมอ ดังนั้นผมจึงเขียนโค้ดดังนี้ครับ


var isCompleted = $("table.ms-formtable tr:eq(11) td:eq(1)").html();
if (isCompleted!=null&&isCompleted.indexOf("1 ")>-1) {
$('table.ms-toolbar').hide();
}


คือใช้ Selectors แบบ ancestor descendant ร่วมกับ Filters หรืออธิบายคือ สั่งให้ jQuery ไปหา element ที่ class =table.ms-formtable (ซึ่งเป็น table) จากนั้นก็ไปที่ row ที่ 12 (index=11) ของตารางนี้ และไปที่ column ที่ 2 (index=1) แล้วไปดึงเอา innerHTML ออกมาซะ เพื่อตรวจสอบเงื่อนไขสำหรับ hide ตาราง

แต่ปรากฎว่าแต่ละหน้า อาจมี row ไม่เท่ากันก็ได้ ดังนั้นคุณ Nine จึงสั่งไปที่ table เดียวกัน (class =table.ms-formtable) แล้วใช้ jQuery Object Accessors ที่ชื่อว่า each ในการวนลูปทีละแถว เพื่อตรวจสอบข้อมูลทุกแถวครับ


$(document).ready(function($) {
var rows = $('table.ms-formtable tr').each(function() {
var row = $(this);
var columns = row.children('td');
if(columns.eq(1).html().indexOf('ProcessCompleted')>-1 && columns.eq(1).html().indexOf('1 ')>-1)
$('table.ms-toolbar').hide();
});
});


จริงๆแล้ว เราควรจะใช้ ID เป็น Selector จะได้ง่าย แต่เพราะว่า MS SharePoint มันดันสร้าง ID ซ้ำกันเยอะแยะนั่นสิ ทำให้เวลาเราใช้ ID Selector แล้วมันจะได้เฉพาะ element แรกเท่านั้นนั่นเอง (เพราะ ID ควรมีแค่ 1 ID ต่อ 1 page)
ใครสนใจจะดูโค้ดเต็มๆลองไปดูที่

jQuery ค้นหาค่า และซ่อน table ช่วยหน่อยคร้าบ
http://greatfriends.biz/?110667

ไม่มีความคิดเห็น: