Jul
9
2010

มาสร้าง HTML ด้วย jQuery version 1.4 กันครับ

An article by บริษัท เก้ายอดสตูดิโอ จำกัด

Comments Off

ในบางงานที่เป็นการทำงานที่ไม่ใช่ Static HMTL หรือเป็น dynamic HTML นั้นเราจำเป็นต้องใช้ความสามารถของ JavaScript มาช่วยในการสร้าง HTML แบบ dynamic หรือแบบที่มีการเปลี่ยนแปลงตลอดเวลา ใน jQuery version 1.4 เราจะมาใช้ความสามารถของมันในการสร้าง HTML แบบ dynamic กันครับ ถ้าเรียกเป็นภาษาทางการหน่อยก็ Building HTML in jQuery

มาเข้าเรื่องกันเลยครับ
บางคนคงเคยเขียน code ด้วย JavaScript แบบตัวอย่างด้านล่างนี้กันมาบ้างแล้วสำหรับการทำ dynamic HTML

1
2
3
4
5
6
7
8

html = '<input "' + inputId
+ '" name="'
+ inputName
+ '" type="'
+ inputType
+ '"'
+ (isChecked ? 'checked="checked"' : '')
+ '/>';

Code ด้านบนนี้มันก็คือการ Build HTML ขึ้นมานั้นเองแต่ด้วยความสามาถใหม่ของ jQuery 1.4 นั้น
เราสามารถเขียนให้ได้ผลออกมาเหมือนกันได้แต่ง่ายกว่าตาม code ด้านล่างนี้ครับ

1
2
3
4
5
6
7
8
9

$("input", {
id: "permissionsInput",
name: "permissions",
type: "checkbox",
click: function(){
update();
},
checked: "checked"
}).appendTo("#myForm");

จะเห็นว่าเราสามารถ Build tag “input” ขึ้นมาได้เหมือนกับ code แรกและยังสามารถกำหนด event ให้กับ input box ไปได้อีกด้วย เราสามารถกำหนด attributes ต่างๆที่จำเป็นสำหรับ Tag นั้นๆเข้าไปด้วยด้วยไม่ว่าจะเป็น Class,ID,Name,Value ได้หมดครับ ใส่ Event เข้าไปเลยก็ยังได้ หรือเราจะกำหนดค่าตัวแปรต่างๆเข้าไปด้วยเลยก็ได้

เท่าที่ลองเล่นดูผมว่า version 1.4 นี้ช่วยงานได้เยอะเหมือนกันครับ ความสามารถใหม่ๆที่เพิ่มเข้ามา ทำให้เวลากลับไปแก้ไข code ของ javascript นั้นทำได้ง่ายและรวดเร็วขึ้นเยอะเลย