บทความในวันนี้เป็นการประยุกต์ใช้คำสั่ง .append()

สมมติว่าว่าผมมีโครงสร้างตารางอย่างนี้

<table id="tbl-product">
  <tr>
    <th>#</th>
    <th>product</th>
  </tr>
  <tr>
    <td>1</td>
    <td>cat</td>
  </tr>
</table>
<p><input type="button" name="add-row" id="add-row" value="เพิ่มแถว" /></p>

ใส่ id ให้ตารางด้วย จะได้อ้างถึงใน jQuery ง่ายๆหน่อย เมื่อคลิกปุ่ม เพิ่มแถว ก็ให้เพิ่มแถวใหม่เข้าไปในตาราง

โค้ดเขียนง่ายๆอย่างนี้

<script type="text/javascript">
$(document).ready(function(){
 
	$('#add-row').click(function(){
 
		var tr = $('<tr></tr>');
		var td1 = $('<td>#</td>');
		var td2 = $('<td>mouse</td>');
 
		tr.append(td1);
		tr.append(td2);
 
		$('#tbl-product').append(tr);
 
	});
 
 
})
</script>

Live Demo

Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ