jQuery เพิ่มแถวเข้าไปในตาราง

January 2010 | By platoosom | jQuery | อ่าน : 530

บทความในวันนี้เป็นการประยุกต์ใช้คำสั่ง .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

บทความน่าสนใจ

  1. jQuery .each เขาใช้กันยังไง
  2. คำสั่ง append() ของ jquery
  3. เพิ่มแถวเข้าไปในตารางด้วย jQuery
  4. คำสั่ง prepend() ของ jquery
  5. คำสั่ง before() ของ jquery

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

เว็บไซต์ :http://www.select2web.com

งานเล็กๆก็ยิ่งใหญ่ได้ ถ้าอยู่ในที่ๆเหมาะสม

มี 2 ความเห็น ในบทความเรื่อง “jQuery เพิ่มแถวเข้าไปในตาราง”

  1. minddezign says:

    ขอบคุณครับ

  2. kwang says:

    ถ้าเราจะเพิ่มทั้งแถวทั้งคอลัมน์ด้วยละค่ะ เป็น 5คอลัมน์ 2แถว

แสดงความเห็น

ชื่อ *
Email *
Website
ความคิดเห็น