jquery 动态添加、按顺序添加input文本框并且实现删除操作

来源：互联网发布：淘宝搜索引擎的原理编辑：程序博客网时间：2024/06/06 20:16

1.先来一张图来告诉我们今天要实现什么

蓝色加号按钮点击就会动态添加一行“发明人N姓名”和“发明人N排名” 的input文本框还有图片”“ 点击蓝色按钮减号就会减少相对应的那一行还有索引也会减掉图片”“

2.首先 “发明人1姓名” 和 ”发明人1排名“是html要有的，然后点击加号按钮才会动态添加贴出html 代码

[html] view plain copy
<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>  

[html] view plain copy
<div style="position: absolute; top: 118px; right: -25px;"><img src="${pageContext.request.contextPath}/img/jia.png" onclick="add()"/></div>  

3.点击add方法

[javascript] view plain copy
//动态添加表格  
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的方法   
 }  
}  

[javascript] view plain copy
//得到'发明人姓名'和'发明人排名'的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;  
 }  

[javascript] view plain copy
//创建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文本框的方法

[javascript] view plain copy
//动态减掉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的索引都删除掉了以后字段、索引要重新赋值、开始新的排序。

注意：索引一定不要排错否则就会产生点击添加按钮不添加一行，点击删除不删除等操作

阅读全文

0 0