点击按钮添加一行,和本行的删除功能,序号变动,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); //向后添加 } }
这个人很懒,什么也没下留。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 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)