jquery 动态添加、按顺序添加input文本框并且实现删除操作
2017-06-20 14:32
537 查看
1.先来一张图来告诉我们今天要实现什么
蓝色加号按钮点击就会动态添加一行“发明人N姓名”和“发明人N排名” 的input文本框还有图片”“ 点击蓝色按钮减号就会减少相对应的那一行还有索引也会减掉图片”“
2.首先 “发明人1姓名” 和 ”发明人1排名“是html要有的,然后点击加号按钮才会动态添加 贴出html 代码
<table class="table-ys3" width="100%" id="table">
<tr id="tableTR_1">
<td class="bt2" width="4%">发明人1姓名</td>
<td width="10%"><input type="text" id="InventorName_1" class="bd-ys1" value="" /></td>
<td class="bt2" width="4%">发明人1排名</td>
<td width="10%"><input type="text" id="InventorRanking_1" class="bd-ys1" value="" /></td>
</tr><table>
3.点击add方法
3.动态添加也就能动态删除tr,下面来粘一段动态删除tr的input文本框的方法
注意:索引一定不要排错否则就会产生点击添加按钮不添加一行,点击删除不删除等操作
这是在开发中我第三次做这个要求了,拿出来和大家分享,希望能帮助到大家。测试通过,已经可以使用了,如果不懂的亲们欢迎随时交流,共同进步!
蓝色加号按钮点击就会动态添加一行“发明人N姓名”和“发明人N排名” 的input文本框还有图片”“ 点击蓝色按钮减号就会减少相对应的那一行还有索引也会减掉图片”“
2.首先 “发明人1姓名” 和 ”发明人1排名“是html要有的,然后点击加号按钮才会动态添加 贴出html 代码
<table class="table-ys3" width="100%" id="table">
<tr id="tableTR_1">
<td class="bt2" width="4%">发明人1姓名</td>
<td width="10%"><input type="text" id="InventorName_1" class="bd-ys1" value="" /></td>
<td class="bt2" width="4%">发明人1排名</td>
<td width="10%"><input type="text" id="InventorRanking_1" class="bd-ys1" value="" /></td>
</tr><table>
<div style="position: absolute; top: 118px; right: -25px;"><img src="${pageContext.request.contextPath}/img/jia.png" onclick="add()"/></div>
3.点击add方法
//动态添加表格 function add(){ var top1=118; var xhcs=forEachTDCS(); if(xhcs!=""){ var xhcss=xhcs.split(","); var dqzhzhygtr=xhcss[xhcss.length-1]*1+1;//当前添加的最后一个tr的id值 top1=top1+36*dqzhzhygtr-36;//动态添加图片的高 //参数 dqzhzhygtr为第几个tr的索引 ,top1为计算的高 creatTR(dqzhzhygtr,top1)//创建tr和td的方法 } }
//得到'发明人姓名'和'发明人排名'的tr有几行 var forEachTDCS=function(){ var xhcs=""; //循环所有的tr $("#table").find("tr").each(function(){ var tableTr=$(this).attr("id");//找到tr的id if(tableTr!="undefined"&&tableTr!=null){ if(tableTr.indexOf("tableTR_")>=0){ if(xhcs==""){ xhcs+=tableTr.split("_")[1];//分割出tr的索引 }else{ xhcs+=","+tableTr.split("_")[1] } } } }) return xhcs; }
//创建tr和td function creatTR(dqzhzhygtr,top1){ var strTr=""; var strImg=""; strTr+="<tr id='tableTR_"+dqzhzhygtr+"'><td class='bt2'>发明人"+dqzhzhygtr+"姓名 </td>" strTr+="<td><input type='text' class='bd-ys1' id='InventorName_"+dqzhzhygtr+"' value='' /></td>"; strTr+="<td class='bt2' >发明人"+dqzhzhygtr+"排名</td>"; strTr+="<td><input type='text' id='InventorRanking_"+dqzhzhygtr+"' class='bd-ys1' value='' /></td></tr>"; strImg="<div id='jianimg_"+dqzhzhygtr+"' style='position: absolute; top: "+top1+"px; right: -25px;'><img src='${pageContext.request.contextPath}/img/jian.png' onclick='jian("+dqzhzhygtr+","+top1+")'/></div>" //告诉tr在N行减1的位置 var dqzhzhygtrs=dqzhzhygtr*1-1; $("#tableTR_"+dqzhzhygtrs).after(strTr)//一定要用after才在N行减1之后的位置顺序插入 $("#tableTR_"+dqzhzhygtrs).after(strImg)//追加减号图片 }以上这些操作一个动态的input文本框,添加完毕,还能按顺序排列哦
3.动态添加也就能动态删除tr,下面来粘一段动态删除tr的input文本框的方法
//动态减掉td表格 function jian(index,top1){ //得到操作的所有tr var xhcs=forEachTDCS(); var xhcss=xhcs.split(","); $("#jianimg_" + index).remove();//删除图片的索引 $("#tableTR_" + index).remove();//删除tr的索引 for(var i=0;i<xhcss.length;i++){ //所需要的索引需大于要删除的索引 if(xhcss[i]>index){ //获取图片div的高 var jtop=$("#jianimg_" + xhcss[i]).css('top'); //获取的高-所需要的数值 var jtopS = jtop.split("px")[0]*1-36*1; //div的高经计算后设置到div的高中 也就是从新赋值 $("#jianimg_" + xhcss[i]).css({"top":jtopS}); var imgId="jianimg_"+(xhcss[i]*1-1); var trId="tableTR_"+(xhcss[i]*1-1); var InventorNameid="InventorName_"+(xhcss[i]*1-1); var InventorRankingId="InventorRanking_"+(xhcss[i]*1-1); //改变tr索引 和 图片div索引 让其排序 $("#jianimg_" + xhcss[i]).attr("id",imgId);//新的排序id赋值到div中 $("#InventorName_"+ xhcss[i]).attr("id",InventorNameid);//姓名--将input的id排序 赋值到input的id中 $("#InventorRanking_"+ xhcss[i]).attr("id",InventorRankingId);//排名--将input的id排序 赋值到input的id中 var str="<img style='abvn' src='${pageContext.request.contextPath}/img/jian.png' onclick='jian("+(xhcss[i]*1-1)+","+jtopS+")'/>"; $("#"+imgId).html(str);//点击onclick方法里的索引才能改变 $("#tableTR_" + xhcss[i]).attr("id",trId);//新的排序id赋值到tr中 $("#"+trId).find("td").eq(0).text("发明人"+(xhcss[i]*1-1)+"姓名");//改变显示名称顺序 $("#"+trId).find("td").eq(2).text("发明人"+(xhcss[i]*1-1)+"排名");//改变显示排名顺序 } }这样inpu的索引都删除掉了以后字段、索引要重新赋值、开始新的排序。
注意:索引一定不要排错否则就会产生点击添加按钮不添加一行,点击删除不删除等操作
这是在开发中我第三次做这个要求了,拿出来和大家分享,希望能帮助到大家。测试通过,已经可以使用了,如果不懂的亲们欢迎随时交流,共同进步!
相关文章推荐
- jquery 动态添加、按顺序添加input文本框并且实现删除操作
- jQuery + JavaScript 实现的动态添加文本框功能 和 动态删除文本框功能(二)
- Jquery动态添加 删除 操作实现
- jQuery实现动态添加、删除按钮及input输入框的方法
- JS小功能(操作Table--动态添加删除表格及数据)实现代码
- jQuery表格操作添加行、删除行和动态移动
- js jquery分别实现动态的文件上传操作按钮的添加和删除
- 使用jquery实现表格的动态添加和删除
- jquery 实现表格内的tr与td,动态添加与删除. 以及序号增加与减少,大多用在Form里
- JQuery实现动态添加删除评论的方法
- JQuery实现动态增加和删除文本框
- JQuery实现动态增加和删除文本框
- Jquery和js实现cookie操作手机浮层广告;附加:js获取、添加、删除cookie
- jquery对文本框动态的添加和删除
- JS小功能(操作Table--动态添加删除表格及数据)实现代码
- jQuery动态添加删除select项(实现代码)
- jquery实现动态添加和删除表格
- JQUERY动态绘制表格,实现动态添加一行,删除一行
- 实现动态的文件上传操作按钮的添加和删除