PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

การกำหนด แท็ก html ในตัวแปร JavaScript อย่างง่าย

22 March 2011 By


ตัวอย่างแนวทางต่อไปนี้ เป็นเทคนิค เล็กน้อยในการใช้งานตัวแปร 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>  
    &nbsp;
    <button id="removeRow" type="button">-</button>
	&nbsp;
    &nbsp;
    &nbsp;
    <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>  
    &nbsp;
    <button id="removeRow" type="button">-</button>
	&nbsp;
    &nbsp;
    &nbsp;
    <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>

 


Tags:: html javascript





URL สำหรับอ้างอิง