jquery向表格添加一行,或者删除一行数据
表格最后一行有一个添加按纽,具体如下
当点击添加按纽的时候,在这个表格的倒数第二行添加一行,因为倒数第一行是添加按钮的位置。代码如下
页面的table代码
<table border="0" cellpadding="2" cellspacing="1" width="100%" class="tablebgW" id="table2"> <tr class="content" > <td class="tableCenter" width="25%">参与项目</td> <td class="tableCenter" width="15%">所在行政区划</td> <td class="tableCenter" width="15%">开户银行</td> <td class="tableCenter" width="15%">银行网点</td> <td class="tableCenter" width="15%">银行账号</td> <td class="tableCenter" width="15%">开户户名</td> <td class="tableCenter" width="15%">操作</td> </tr> <tr class="back5" id="jmcyxm" > <td class="tableCenter" width="25%"> <!-- 补贴项目下拉菜单,需要从数据库里进行读取 到时候写一个htjs:select下拉菜单 --> <htjs:select sid="SELECT_ALL_BTXM" value="DM_BTXM" label="MC_BTXM" name="BTXM" associate="" > </htjs:select> </td> <!-- 所在行政区划 --> <td class="tableCenter" width="25%"> <input type="hidden" name="nmXzqhDm" /> <input type="text" name="XMXZQH" οnclick="" size="10" readonly="readonly"/> <a href="javascript:void(0);" οnclick=""></a> <img src="/server/hmykt/public/images/images/bi.gif" title="选择" style="cursor: hand"> </td> <!-- 选择银行 --> <td class="tableCenter" width="12.5%"> <select name="nmYhlbDm" οnchange=""> <option value="01">农业银行</option> <option value="02">邮政银行</option> <option value="03">农村信用社</option> <option value="04">建设银行</option> <option value="05">地方商业银行</option> </select> </td> <td class="tableCenter" width="12.5%"> <input type="text" name="nmHH_KHYH_SHOW" size="10" οnclick="" readonly="readonly"/> <a href="" οnclick=""></a> <img src="/server/hmykt/public/images/images/bi.gif" title="选择试验" style="cursor: hand" /> </td> <!-- 银行帐号 --> <td class="tableCenter" width="12.5%"> <input type="text" size="10" name="nmYhzh" value="试验" /> </td> <!-- 开户户名 --> <td class="tableCenter" width="12.5%"> <input type="text" size="10" name="nmKhhm" value="试验二"/> </td> <!-- 最后一个td --> <td> </td> </tr> <tr class="back5" id="tianjia"> <td class="tableRight" colspan="7"> <input type="button" class="button1" name="" id="" value="添 加" οnclick="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' οnclick='delRow(this);'title='删除'>"); tr.insertBefore("#table2 tr:last");//把这行加到表格的倒数第二行,表格添加完毕 } //删除相对应的行 function delRow(rows) { $(rows).parent("td").parent("tr").remove(); }
删除行的时候要注意,传过来的那个参数,在调用的时候,传一个this参数即可,代表的是本行