点击按钮添加一行,和本行的删除功能,序号变动,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 @   天涯已可  阅读(710)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛(1)
点击右上角即可分享
微信分享提示