利用jquery 动态添加删除表格行

       /**
         * 动态添加删除表格行
         */
        $("document").ready(function(){
                //表格的删除按钮事件绑定
                $("#TbData #del").click(function() {
                    $(this).parents(".repeat").remove();
                });
                //第六个表格的添加按钮事件绑定
                $("#add").click(function(){
                    $("#tbbody>.template")
                        //连同事件一起复制
                        .clone(true)
                        //去除模板标记
                        .removeClass("template")
                        //修改内部元素
                        //.find(".content")
                        //.text("新增行")
                        //.end()
                        //.find(".del")
                        //.text("删除")
                        //.end()
                        //插入表格
                        .appendTo($("#tbbody"))
                });
            }
        )

  表格如下:

                <table id="TbData" width="100%">
                      <tbody id="tbbody">
                       <tr>
                       <th>公司名称</th>
                       <th>联系人</th>
                       <th></th>
                       </tr>
                       <tr  class="template repeat">
                       <td>
                       <input type="text" id="company"  class="company"
                                                                             name="company[]"></td>
                       <td><input type="text" id="linkman"  class="linkman"
                                                                             name="linkman[]"></td>
                       <td><a href="#" id="del">
                               <img id="del" src="http://images.cnblogs.com/delete.gif">
                           </a>
                       </td>
                       </tr>
                      </tbody>
                    </table>

  

posted @ 2012-05-30 16:16  redhairboy  阅读(1310)  评论(0编辑  收藏  举报