การกำหนด แท็ก html ในตัวแปร JavaScript อย่างง่าย
22 March 2011ตัวอย่างแนวทางต่อไปนี้ เป็นเทคนิค เล็กน้อยในการใช้งานตัวแปร JavaScript เก็บ html
โดยตัวอย่างประยุกต์จากเนื้อหา
เทคนิค การเพิ่ม ลบ แถว ในตาราง รายการข้อมูล ด้วย jQuery อย่างง่าย
http://www.ninenik.com/content.php?arti_id=299
โค้ด html ประกอบอธิบาย
<form id="form1" name="form1" method="post" action="">
<table id="myTbl" width="650" border="1" cellspacing="2" cellpadding="0">
<tr>
<td width="119"><select name="data1[]" id="data1[]">
<option value="1">data1</option>
<option value="2">data2</option>
</select></td>
<td width="519"><input type="text" name="data2[]" id="data2[]" /></td>
</tr>
</table>
<br />
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<button id="addRow" type="button">+</button>
<button id="removeRow" type="button">-</button>
<button id="Submit" type="submit">Submit</button>
</td>
</tr>
</table>
</form>
จากโค้ดด้านบน เราต้องการ เอา html บรรทัดที่ 3 - 9 มากำหนดในตัวแปร JavaScript
สร้างรูปแบบตัวแปร
var dataClone='\ ';
จากนั้นก็อบโค้ดบรรทัดที่ 3 - 9 มาใส่ด้านใน รูปแบบตัวแปรที่เรากำหนด จะได้
var dataClone='\
<tr>
<td width="119"><select name="data1[]" id="data1[]">
<option value="1">data1</option>
<option value="2">data2</option>
</select></td>
<td width="519"><input type="text" name="data2[]" id="data2[]" /></td>
</tr>
';
สังเกตว่าใน attribute ของ html จะกำหนดค่าใน " (double quote) ทั้งหมด
จากนั้น ให้ต่อท้ายบรรทัด html ทุกบรรทัด ด้วย \ จะได้
var dataClone='\
<tr>\
<td width="119"><select name="data1[]" id="data1[]">\
<option value="1">data1</option>\
<option value="2">data2</option>\
</select></td>\
<td width="519"><input type="text" name="data2[]" id="data2[]" /></td>\
</tr>\
';
นำไปประยุกต์กับเนื้อหา เทคนิค การเพิ่ม ลบ แถว ในตาราง รายการข้อมูล ด้วย jQuery อย่างง่าย
http://www.ninenik.com/content.php?arti_id=299
ผลลัพธ์ที่ได้ คือบรรทัดที่มีการเพิ่มมา จะไม่เอาข้อมูลที่ทำการพิมพ์ไปแล้วมาแสดง
ตัวอย่าง
โค้ดตัวอย่างทั้งหมด
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery clone no data</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table id="myTbl" width="650" border="1" cellspacing="2" cellpadding="0">
<tr>
<td width="119"><select name="data1[]" id="data1[]">
<option value="1">data1</option>
<option value="2">data2</option>
</select></td>
<td width="519"><input type="text" name="data2[]" id="data2[]" /></td>
</tr>
</table>
<br />
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<button id="addRow" type="button">+</button>
<button id="removeRow" type="button">-</button>
<button id="Submit" type="submit">Submit</button>
</td>
</tr>
</table>
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
var dataClone='\
<tr> \
<td width="119"><select name="data1[]" id="data1[]"> \
<option value="1">data1</option> \
<option value="2">data2</option> \
</select></td> \
<td width="519"><input type="text" name="data2[]" id="data2[]" /></td> \
</tr> \
';
$("#addRow").click(function(){
$("#myTbl").append(dataClone);
});
$("#removeRow").click(function(){
if($("#myTbl tr").size()>1){
$("#myTbl tr:last").remove();
}else{
alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ");
}
});
});
</script>
</body>
</html>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
02 Nov 10 แนะนำ และการใช้งาน jQuery Colorpicker Plugin การเลือกค่าสี อ่าน 1492 08 Oct 08 การสร้างปุ่มด้วย CSS อ่าน 4677 16 Aug 10 เทคนิค ใช้ event beforeunload แจ้งเตือนก่อน ปิดบราวเซอร์ ด้วย jQuery อ่าน 1651 21 Apr 10 สร้างเส้นทาง เพื่อ หาระยะทาง ใน google map ด้วย jQuery อ่าน 7528 06 Dec 11 การใช้งาน css จัดตำแหน่ง ซ้อนข้อความบนรูปภาพอย่างง่าย อ่าน 967 11 Dec 09 ทบทวน การเรียกใช้งาน events ใน javascript ที่ใช้ได้สำหรับ ทุก browsers อ่าน 2254 25 Sep 08 รู้จักฟังก์ชันของ jQuery ในการเรียกใช้ Class ใน CSS อ่าน 2778 04 Mar 09 ใช้ jQuery ย้ายค่าระหว่าง multiple list box อย่างง่าย อ่าน 6980 27 Sep 10 วิธีใช้ css จัดรูปแบบ เนื้อหา contents ที่ต้องการแสดง บน google map อ่าน 2818 02 Dec 10 แทรก emoticon ด้วย javascript ฟังก์ชัน ให้กับ ckeditor อ่าน 2320 19 Nov 10 ทางเลือก อัพโหลดไฟล์ใน ckeditor ด้วย ajax file manager อ่าน 2244 05 Jul 09 สร้างฟังก์ชัน autocomplete ให้ใช้งานแบบง่าย ด้วย ajax อ่าน 13253 25 Mar 11 สร้างรูปแบบ วันที่ คล้าย วันที่ใน facebook comment ด้วย php อย่างง่าย อ่าน 2839 23 Jan 12 แนวทางการประยุกต์ การซ่อน แสดงเนื้อหาสำหรับล็อกอิน อย่างง่าย ด้วย jQuery อ่าน 461 06 Apr 10 ใช้ คุณสมบัติ css stylesheet สร้างตาราง อ่าน 4696 13 Oct 11 แนะนำการใช้งาน การเชื่อมต่อ facebook ด้วย php sdk v.3.1.1 อ่าน 885 25 Sep 08 แบ่งหน้า ด้วย Code แบบง่าย อ่าน 5747 13 Sep 10 ประยุกต์ สร้างเครื่องมือ ค้นหา พิกัด จากชื่อสถานที่ จำนวนมาก ใน google map อ่าน 1899 13 Oct 08 คำสั่ง SQL AND OR อ่าน 3127 21 Jan 11 การใช้งาน Meta characters ใน Regular Expressions ของ PHP อ่าน 1097