<!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=windows-874" /> <title>Simple add/delete table row with jQuery by PlaKriM</title> <script type="text/javascript" src="jquery-1.4.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#add_item').click(function(){ $('#mytbl tbody tr').last().clone().appendTo('#mytbl tbody'); $('#mytbl tbody tr').last().find('input:text').val(''); }); }); function doRemoveItem(obj){ if($('#mytbl tbody tr').size() > 1){ if(confirm('คุณต้องการลบแถวนี้?')) $(obj).parent().parent().remove(); }else{ alert('ไม่อนุญาตให้ลบแถวที่เหลือนี้ได้'); } } </script> </head> <body> <table id="mytbl" width="100%" cellspacing="1" cellpadding="1" align="center" border="1"> <thead> <tr> <td align="middle">Column 1</td> <td align="middle">Column 2</td> <td align="middle">Column 3</td> <td align="middle" width="24"> </td> </tr> </thead> <tbody> <tr> <td align="middle"><input type='text' name='txt1[]' /></td> <td align="middle"><input type='text' name='txt2[]' /></td> <td align="middle"><input type='text' name='txt3[]' /></td> <td align="middle"><button onclick="javascript:doRemoveItem(this);" style="width:22px;">-</button> </td> </tr> </tbody> </table> <div style="margin:5px auto 0px auto;"><button type="button" id="add_item" style="width:22px;">+</button></div> </body> </html>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง