1.先来一张图来告诉我们今天要实现什么
蓝色加号按钮点击就会动态添加一行“发明人N姓名”和“发明人N排名” 的input文本框还有图片”“ 点击蓝色按钮减号就会减少相对应的那一行还有索引也会减掉图片”“
2.首先 “发明人1姓名” 和 ”发明人1排名“是html要有的,然后点击加号按钮才会动态添加 贴出html 代码
1. <table class="table-ys3" width="100%" id="table">
2. <tr id="tableTR_1">
3. <td class="bt2" width="4%">发明人1姓名</td>
4. <td width="10%"><input type="text" id="InventorName_1" class="bd-ys1" value="" /></td>
5. <td class="bt2" width="4%">发明人1排名</td>
6. <td width="10%"><input type="text" id="InventorRanking_1" class="bd-ys1" value="" /></td>
7. </tr><table>
1. <div style="position: absolute; top: 118px; right: -25px;"><img src="${pageContext.request.contextPath}/img/jia.png" onclick="add()"/></div>
3.点击add方法
1. //动态添加表格
2. function add(){
3. var top1=118;
4. var xhcs=forEachTDCS();
5. if(xhcs!=""){
6. var xhcss=xhcs.split(",");
7. var dqzhzhygtr=xhcss[xhcss.length-1]*1+1;//当前添加的最后一个tr的id值
8. //动态添加图片的高
9. //参数 dqzhzhygtr为第几个tr的索引 ,top1为计算的高
10. //创建tr和td的方法
11. }
12. }
1. //得到'发明人姓名'和'发明人排名'的tr有几行
2. var forEachTDCS=function(){
3. var xhcs="";
4. //循环所有的tr
5. "#table").find("tr").each(function(){
6. var tableTr=$(this).attr("id");//找到tr的id
7. if(tableTr!="undefined"&&tableTr!=null){
8. if(tableTr.indexOf("tableTR_")>=0){
9. if(xhcs==""){
10. "_")[1];//分割出tr的索引
11. else{
12. ","+tableTr.split("_")[1]
13. }
14. }
15. }
16. })
17. return xhcs;
18. }
1. //创建tr和td
2. function creatTR(dqzhzhygtr,top1){
3. var strTr="";
4. var strImg="";
5. "<tr id='tableTR_"+dqzhzhygtr+"'><td class='bt2'>发明人"+dqzhzhygtr+"姓名 </td>"
6. "<td><input type='text' class='bd-ys1' id='InventorName_"+dqzhzhygtr+"' value='' /></td>";
7. "<td class='bt2' >发明人"+dqzhzhygtr+"排名</td>";
8. "<td><input type='text' id='InventorRanking_"+dqzhzhygtr+"' class='bd-ys1' value='' /></td></tr>";
9. "<div id='jianimg_"+dqzhzhygtr+"' style='position: absolute; top: "+top1+"px; right: -25px;'><img src='${pageContext.request.contextPath}/img/jian.png' οnclick='jian("+dqzhzhygtr+","+top1+")'/></div>"
10. //告诉tr在N行减1的位置
11. var dqzhzhygtrs=dqzhzhygtr*1-1;
12. "#tableTR_"+dqzhzhygtrs).after(strTr)//一定要用after才在N行减1之后的位置顺序插入
13. "#tableTR_"+dqzhzhygtrs).after(strImg)//追加减号图片
14. }
以上这些操作一个动态的input文本框,添加完毕,还能按顺序排列哦
3.动态添加也就能动态删除tr,下面来粘一段动态删除tr的input文本框的方法
1. //动态减掉td表格
2. function jian(index,top1){
3. //得到操作的所有tr
4. var xhcs=forEachTDCS();
5. var xhcss=xhcs.split(",");
6. "#jianimg_" + index).remove();//删除图片的索引
7. "#tableTR_" + index).remove();//删除tr的索引
8. for(var i=0;i<xhcss.length;i++){
9. //所需要的索引需大于要删除的索引
10. if(xhcss[i]>index){
11. //获取图片div的高
12. var jtop=$("#jianimg_" + xhcss[i]).css('top');
13. //获取的高-所需要的数值
14. var jtopS = jtop.split("px")[0]*1-36*1;
15. //div的高经计算后设置到div的高中 也就是从新赋值
16. "#jianimg_" + xhcss[i]).css({"top":jtopS});
17. var imgId="jianimg_"+(xhcss[i]*1-1);
18. var trId="tableTR_"+(xhcss[i]*1-1);
19. var InventorNameid="InventorName_"+(xhcss[i]*1-1);
20. var InventorRankingId="InventorRanking_"+(xhcss[i]*1-1);
21. //改变tr索引 和 图片div索引 让其排序
22. "#jianimg_" + xhcss[i]).attr("id",imgId);//新的排序id赋值到div中
23. "#InventorName_"+ xhcss[i]).attr("id",InventorNameid);//姓名--将input的id排序 赋值到input的id中
24. "#InventorRanking_"+ xhcss[i]).attr("id",InventorRankingId);//排名--将input的id排序 赋值到input的id中
25. var str="<img style='abvn' src='${pageContext.request.contextPath}/img/jian.png' οnclick='jian("+(xhcss[i]*1-1)+","+jtopS+")'/>";
26. "#"+imgId).html(str);//点击onclick方法里的索引才能改变
27. "#tableTR_" + xhcss[i]).attr("id",trId);//新的排序id赋值到tr中
28. "#"+trId).find("td").eq(0).text("发明人"+(xhcss[i]*1-1)+"姓名");//改变显示名称顺序
29. "#"+trId).find("td").eq(2).text("发明人"+(xhcss[i]*1-1)+"排名");//改变显示排名顺序
30. }
31. }
这样inpu的索引都删除掉了以后字段、索引要重新赋值、开始新的排序。
注意:索引一定不要排错否则就会产生点击添加按钮不添加一行,点击删除不删除等操作