<!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'); }); }); 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"> </td> <td align="middle"> </td> <td align="middle"> </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>
Load balance : Server 01
