读书人

jquery增添删除表格行

发布时间: 2012-11-23 00:03:43 作者: rapoo

jquery添加删除表格行

jquery向表格添加一行,或者删除一行数据

表格最后一行有一个添加按纽,具体如下

jquery增添删除表格行

当点击添加按纽的时候,在这个表格的倒数第二行添加一行,因为倒数第一行是添加按钮的位置。代码如下

页面的table代码

<table border="0" cellpadding="2" cellspacing="1" width="100%" id="table2"> <tr ><td  width="25%">参与项目</td><td  width="15%">所在行政区划</td><td  width="15%">开户银行</td><td  width="15%">银行网点</td><td  width="15%">银行账号</td><td  width="15%">开户户名</td><td  width="15%">操作</td></tr><tr id="jmcyxm" ><td  width="25%"> <!-- 补贴项目下拉菜单,需要从数据库里进行读取 到时候写一个htjs:select下拉菜单 --><htjs:select sid="SELECT_ALL_BTXM" value="DM_BTXM" label="MC_BTXM" name="BTXM" associate="" ></htjs:select></td><!-- 所在行政区划 --><td  width="25%"> <input type="hidden"   name="nmXzqhDm" />  <input type="text"   name="XMXZQH"   onclick="" size="10" readonly="readonly"/> <a href="javascript:void(0);" onclick=""></a> <img src="/server/hmykt/public/images/images/bi.gif" title="选择" style="cursor: hand"></td><!-- 选择银行  --><td  width="12.5%"> <select  name="nmYhlbDm" onchange=""><option  value="01">农业银行</option><option  value="02">邮政银行</option><option  value="03">农村信用社</option><option  value="04">建设银行</option><option  value="05">地方商业银行</option></select></td><td  width="12.5%">  <input type="text"   name="nmHH_KHYH_SHOW"   size="10"  onclick="" readonly="readonly"/> <a href="" onclick=""></a> <img src="/server/hmykt/public/images/images/bi.gif"  title="选择试验" style="cursor: hand" /></td><!-- 银行帐号 --><td width="12.5%"> <input type="text"  size="10" name="nmYhzh" value="试验" /></td><!-- 开户户名 --><td  width="12.5%"><input type="text"  size="10" name="nmKhhm"  value="试验二"/> </td><!-- 最后一个td --><td></td></tr> <tr id="tianjia"><td   colspan="7">   <input type="button" name="" id="" value="添 加" onclick="appendRow()"/>  </td></tr></table> 

?处理添加删除事件的jquery代码

//添加行function appendRow(){var tr = $("#jmcyxm1").clone(true);//克隆一行tr.find("td:last").html("<img src='/server/hmykt/public/images/images/del_01.gif' onclick='delRow(this);'title='删除'>"); tr.insertBefore("#table2 tr:last");//把这行加到表格的倒数第二行,表格添加完毕}//删除相对应的行function delRow(rows){$(rows).parent("td").parent("tr").remove();}

?删除行的时候要注意,传过来的那个参数,在调用的时候,传一个this参数即可,代表的是本行

读书人网 >Web前端

热点推荐