点击按钮添加一行,和本行的删除功能,序号变动,name属性更改

<!--html结构-->
<div>
    <input type="button" value="添加一行" onclick="add_this(this,'table','need_add')"> 
    <table  border="1"    >
      <tr>
        <th>序号</th>
         <th>姓名</th>
         <th>年龄</th>
         <th>操作</th>
       </tr>
       <tr name="need_add">
          <td>1</td>
          <td><input type="text" name="te_name_1" size="10"></td>
          <td><input type="text" name="te_age"  size="3">
          <td><input type="button" value="删除此行" onclick="delete_this(this)"></td>
        </tr>
      </table>
 </div>
/*js方法*/
/**
    删除此行元素
    v: 删除按钮
    */
    function delete_this(v){
        var tr=$(v).parent().parent();//找到按钮所在的tr
        var tb=$(tr).parent();//找到要操作的table
        var l=$(tb).find("tr:[name=need_add]").length;//当前可以操作的行数
        if(l>1){
            $(tr).remove();//多于1 直接移除
        }else{//只剩一条时,置空
            $(tr).find("td").each(function(){
                $(this).find("input:text").each(function(){
                    $(this).val("");
                });
            });
        }
        if(l>1){
            for( var len=1;len<l-1;len++){//tr 多于一条时,移除一条,遍历剩余条数
                var e_tr=$(trs)[len];//得到某个tr节点
                $(e_tr).find("td")[0].innerText=(len);//修改序号
                $($(e_tr).find("td")[1]).find("input")[0].name="te_name_"+len;//修改里面的input值
            }
        }
        
    }
    /**
    *添加一行元素
    v:当前按钮
    t:按钮同级的table
    name:table中需要复制的tr的name属性
    */
    function add_this(v,t,name){
        var table=$(v).parent().find(t)[0];//获取同级父元素的下table
        var trs=$(table).find("tr:[name="+name+"]");//找到table中需要复制的tr
        if(trs.length>0){
        var pr_tr=$(trs[trs.length-1]);//最后一个tr
            var new_tr=$(pr_tr).clone();//复制,得到新的tr
            $(new_tr).find("td").each(function(){//对tr下的每个td
                $(this).find("input:text").each(function(){//对td下的input置空
                    $(this).val("");
                });
            });
            var pr_num=$(pr_tr).find("td")[0].innerText;//得到上一个tr的序号
            var new_num=parseInt(pr_num)+1;
            var new_td=$(new_tr).find("td")[0];
            new_td.innerText =new_num;    //修改序号
            var new_name=$($(new_tr).find("td")[1]).find("input")[0].name='te_name_'+new_num;//修改name属性
            $(pr_tr).after(new_tr);    //向后添加
        }
    }

 

posted @ 2018-03-21 20:29  天涯已可  阅读(708)  评论(0编辑  收藏  举报