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

一时失言乱红尘 2022-06-06 06:10 377阅读 0赞

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

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

![Center 1][]

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

\[html\]  [view plain][]  [copy][view plain]

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****>**

\[html\]  [view plain][]  [copy][view plain]

1.  **<****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][view plain]

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.       top1=top1+36\*dqzhzhygtr-36;//动态添加图片的高  
9.       //参数 dqzhzhygtr为第几个tr的索引 ,top1为计算的高  
10.      creatTR(dqzhzhygtr,top1)//创建tr和td的方法   
11.  \}  
12. \}

\[javascript\]  [view plain][]  [copy][view plain]

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.                      xhcs+=tableTr.split("\_")\[1\];//分割出tr的索引  
11.                  \}**else**\{  
12.                      xhcs+=","\+tableTr.split("\_")\[1\]  
13.                  \}  
14.              \}  
15.          \}  
16.      \})  
17.      **return** xhcs;  
18.  \}

\[javascript\]  [view plain][]  [copy][view plain]

1.  //创建tr和td  
2.  **function** creatTR(dqzhzhygtr,top1)\{  
3.   **var** strTr="";  
4.   **var** strImg="";  
5.   strTr+="<tr id='tableTR\_"\+dqzhzhygtr+"'><td class='bt2'>发明人"\+dqzhzhygtr+"姓名 </td>"  
6.   strTr+="<td><input type='text' class='bd-ys1' id='InventorName\_"\+dqzhzhygtr+"' value='' /></td>";  
7.   strTr+="<td class='bt2' >发明人"\+dqzhzhygtr+"排名</td>";  
8.   strTr+="<td><input type='text' id='InventorRanking\_"\+dqzhzhygtr+"' class='bd-ys1' value='' /></td></tr>";  
9.   strImg="<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文本框的方法

\[javascript\]  [view plain][]  [copy][view plain]

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的索引都删除掉了以后字段、索引要重新赋值、开始新的排序。

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

[Center]: /images/20220606/4df10775389e4ebaa18ef617a38bd9aa.png
[Center 1]: /images/20220606/ab1739c689a04f3591ff644c8eec89dc.png
[view plain]: http://blog.csdn.net/dfbeautifullive/article/details/73497985#