点击按钮添加一行,和本行的删除功能,序号变动,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); //向后添加 } }
这个人很懒,什么也没下留。