ตัวอย่างแนวทางต่อไปนี้ เป็นเทคนิค เล็กน้อยในการใช้งานตัวแปร JavaScript เก็บ html
โดยตัวอย่างประยุกต์จากเนื้อหา
เทคนิค การเพิ่ม ลบ แถว ในตาราง รายการข้อมูล ด้วย jQuery อย่างง่าย
https://www.ninenik.com/content.php?arti_id=299
โค้ด html ประกอบอธิบาย
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <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
สร้างรูปแบบตัวแปร
1 2 3 | var dataClone='\'; |
จากนั้นก็อบโค้ดบรรทัดที่ 3 - 9 มาใส่ด้านใน รูปแบบตัวแปรที่เรากำหนด จะได้
1 2 3 4 5 6 7 8 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 ทุกบรรทัด ด้วย \ จะได้
1 2 3 4 5 6 7 8 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>\'; |
นำไปประยุกต์กับเนื้อหา เทคนิค การเพิ่ม ลบ แถว ในตาราง รายการข้อมูล ด้วย jQuery อย่างง่าย
https://www.ninenik.com/content.php?arti_id=299
ผลลัพธ์ที่ได้ คือบรรทัดที่มีการเพิ่มมา จะไม่เอาข้อมูลที่ทำการพิมพ์ไปแล้วมาแสดง
ตัวอย่าง
โค้ดตัวอย่างทั้งหมด
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<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">$(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> |
