เทคนิค การเพิ่ม ลบ แถว ในตาราง รายการข้อมูล ด้วย jQuery อย่างง่าย
เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdeeตาราง jquery เพิ่มแถว
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ตาราง jquery เพิ่มแถว
ดูแล้ว 47,470 ครั้ง
คำเตือน! เนื้อหาต่อไปนี้ เป็นเนื้อหาเก่า อาจจะไม่เหมาะสำหรับนำไปใช้งาน
หรือไม่สามารถใช้งานได้แล้ว
ลองดูที่ใหม่กว่า http://niik.in/478 เป็นแนวทางแทน
ลองดูที่ใหม่กว่า http://niik.in/478 เป็นแนวทางแทน
ไปที่ Copy
ในกรณี ที่ต้องการสร้างฟอร์ม สำหรับการบันทึกข้อมูล โดยให้สามารถทำการเพิ่มรายข้อมูล ได้หลายๆ รายการในครั้งเดียว
สามารถประยุกต์ใช้ method .clone() ของ jQuery ในการเพิ่มแถวของรายการ สำหรับเพิ่มข้อมูล ได้
HTML โค้ดฟอร์มตัวอย่าง
<form id="form1" name="form1" method="post" action=""> <table id="myTbl" width="650" border="1" cellspacing="2" cellpadding="0"> <tr id="firstTr"> <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>
จากโค้ดด้านบน สิ่งที่ต้องกำหนด มีอยู่ 2 ที่ คือ id ของ table และ id ของ tr เพื่อใช้ในการอ้างอิงการทำงาน
<table id="myTbl" width="650" border="1" cellspacing="2" cellpadding="0"> <tr id="firstTr"> // table id="myTbl" // tr id="firstTr" .............
Javascript Code
<script language="javascript" src="js/jquery-1.4.1.min.js"></script> <script type="text/javascript"> $(function(){ $("#addRow").click(function(){ $("#myTbl").append($("#firstTr").clone()); }); $("#removeRow").click(function(){ if($("#myTbl tr").size()>1){ $("#myTbl tr:last").remove(); }else{ alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ"); } }); }); </script>
ตัวอย่าง
เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 27-06-2017
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ
เนื้อหาที่เกี่ยวข้อง
-
06 Mar2014การเพิ่ม ลบ แก้ไข ข้อมูล กับ รายการ clone() ด้วย jquery อ่าน 24,193
รูปแบบหรือลักษณะการทำงานของเนื้อหานี้คือ - มีฟอร์ม สำหรับรับค่
-
15 Aug2014การใช้งาน datepicker ใน jqueryui กับ ข้อมูล clone จาก ajax อ่าน 11,180
ปัญหาการใช้ datepicker ใน jqueryui กรณี clone input แล้ว datepicker ใช้งา
URL สำหรับอ้างอิง
Top
Copy
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ