jquery 動態新增、按順序新增input文字框並且實現刪除操作
阿新 • • 發佈:2018-12-24
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>
<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的索引都刪除掉了以後欄位、索引要重新賦值、開始新的排序。
注意:索引一定不要排錯否則就會產生點選新增按鈕不新增一行,點選刪除不刪除等操作
這是在開發中我第三次做這個要求了,拿出來和大家分享,希望能幫助到大家。測試通過,已經可以使用了,如果不懂的親們歡迎隨時交流,共同進步!