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

เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdee
javascript html

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ javascript html

ดูแล้ว 27,516 ครั้ง


ตัวอย่างแนวทางต่อไปนี้ เป็นเทคนิค เล็กน้อยในการใช้งานตัวแปร 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>  
    &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 อย่างง่าย
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>  
    &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>

 



กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ





Tags:: javascript html







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





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ