ตัวอย่างแนวทางต่อไปนี้ เป็นเทคนิค เล็กน้อยในการใช้งานตัวแปร JavaScript เก็บ html
โดยตัวอย่างประยุกต์จากเนื้อหา
เทคนิค การเพิ่ม ลบ แถว ในตาราง รายการข้อมูล ด้วย jQuery อย่างง่าย
https://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 อย่างง่าย
https://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>
