jquery dynamically adds or removes TR and TD "actual project"

Difficulties:

(1) dynamically add, delete TR and TD

(2) every day TR and TD have subscript, and the subscript to dynamic change,

(3) TR and TD why subscript can not be casually written, the reason is that all the data in the TR will be sent in the form of a list to the background object, all the TR in the daily TR name= ' Object [index]. Attribute ', must have subscript and subscript to start from 0 and cannot jump continuously

(4) To increase TR and TD need to learn the details are:

Create TD var $tdName = $ ("<td class= ' in-ctt ' ></td>");

TD Add content $tdName. HTML ("<input name=\ ' teams[" +temprow+ "].uname\ ' value=\ ' \ '/> ');

TR added TD $tr. Append ($tdName);

Add TR to the last line of the table tb1.append ($TR);

(5) to delete TR and TD learning details are:

Transfer the TR subscript to be removed back to delrows (sub)

How to delete tr $ ("#_tr_" +sub). Remove ();

how the TR behind the loop gets each TD every day TD's corresponding name attribute corner label to modify all

$ ("Input[name= ' teams[" +i+ "].uname ']"). attr ("name", "teams[" + (i-1) + "].uname");

(6) The key to this content is familiar with jquery's Selector method and other knowledge points

And be careful, when you do the subscript is always wrong (because the name is assigned to the ' and ') symbol is added incorrectly)

1 //The new team information2 functioninsertrows () {3     //Get Table Object4     varTB1 = $ ("#viewTabs");//find the ID of the table5     varRownum= $ ("#viewTabs tr"). Size ();//get the number of rows in a table6     //var linum=$ ("tr[id^= ' _tr_ ')"). Size (); Gets the number of TR measured with the _tr_ start7     varTemprow=rownum-1;;//for New TR, TD, Attribute subscript8     var$tdName = $ ("<td class= ' in-ctt ' ></td>");//Create a first TD9$tdName. HTML ("<input name=\ ' teams[" +temprow+ "].uname\ ' value=\ ' \ '/> ');//HTML put the serial number in the first TDTen      One     var$tdDept = $ ("<td class= ' in-ctt ' ></td>");//a second TD A$tdDept. HTML ("<input name=\ ' teams[" +temprow+ "].deptname\ ' value=\ ' \ '/> ');//put text box -      -     var$tdPoints = $ ("<td class= ' in-ctt ' ></td>");//a third TD the$tdPoints. HTML ("<input style=\ ' width:420px;\ ' name=\ ' teams[" +temprow+ "].points\ ' value=\ ' \ '/> ');//put text box -      -     var$tdLeader = $ ("<td class= ' in-ctt ' ></td>");//a fourth TD -$tdLeader. HTML ("<input type=\ ' radio\ ' name=\ ' teams[" +temprow+ "].leader\ ' value=\ ' 1\ '/> is &nbsp;&nbsp;" ++ "<input type=\ ' radio\ ' name=\ ' teams[" +temprow+ "].leader\ ' value=\ ' 2\ ' checked=\ ' checked\ '/> No");//put text box -     var$tdDel = $ ("<td class= ' in-ctt ' ></td>");//a fifth TD +$tdDel. HTML ("<input hidden=\ ' hidden\ ' name=\ ' teams[" +temprow+ "].busid\ ' value=\ ' ${bean.id}\ '/>" A+ "<input type=\ ' button\ ' value=\ ' delete \ ' name=\ ' del[" +temprow+ "]\ ' onclick=\ ' delrows (" +temprow+ ") \ ' > ');//Add a hyperlink inside a hyperlink there's a way to delete it . at  -     var$TR = $ ("<tr id=\ ' _tr_" +temprow+ "\ ' class=\ ' in-opt\ ' ></tr>");//Create a TR and place 3 TD into TR - $tr. Append ($tdName); - $tr. Append ($tdDept); - $tr. Append ($tdPoints); - $tr. Append ($tdLeader); in $tr. Append ($tdDel); -     //Add the new TR at the end of the table to tb1.append ($TR); + }  - //Remove the TR and TD and move the following TR and TD and subscript to match the functionDelrows (sub) { *     //var temp=[]; The TD attribute value that was originally used to save the move TR was later found to automatically match the data so it hides $     varrownum=sub+1;//Here the rule is: line number is subscript +1Panax Notoginseng     varTB1 = $ ("#viewTabs");//find the ID of the table -     varTemprow = $ ("#viewTabs tr"). Size ();//get the number of rows in a table the     if(Temprow >rowNum) {      +$ ("#_tr_" +sub). Remove ();//Delete TR A      for(I= (parseint (sub) +1); i<temprow-1;i++){ the         //temp[0]=$ ("input[name=teams[" +i+ "].uname]"). Val (); +         //temp[1]=$ ("input[name=teams[" +i+ "].deptname]"). Val (); -         //temp[2]=$ ("input[name=teams[" +i+ "].points]"). Val (); $         //temp[3]=$ ("input[name=teams[" +i+ "].leader]"). Val (); $         //temp[4]=$ ("input[name=teams[" +i+ "].busid]"). Val (); -$ ("#_tr_" +i). attr ("id", "_tr_" + (i-1) + ""); -$ ("Input[name= ' del[" +i+ "]"). attr ("onclick", "Delrows (" + (i-1) + ")"); the$ ("Input[name= ' del[" +i+ "]"). attr ("name", "del[" + (i-1) + "]"); -$ ("Input[name= ' teams[" +i+ "].uname ']"). attr ("name", "teams[" + (i-1) + "].uname");Wuyi$ ("Input[name= ' teams[" +i+ "].deptname ']"). attr ("name", "teams[" + (i-1) + "].deptname"); the$ ("Input[name= ' teams[" +i+ "].points ']"). attr ("name", "teams[" + (i-1) + "].points"); -$ ("Input[name= ' teams[" +i+ "].leader ']"). attr ("name", "teams[" + (i-1) + "].leader"); Wu$ ("Input[name= ' teams[" +i+ "].busid ']"). attr ("name", "teams[" + (i-1) + "].busid"); -  About          }     $     } -  -}

Html

1<!--team Information--2<div class= "Pane" >3<div class= "IN-BTN" >4<input type= "text" style= "Display:none;"/>5</div>6<div style= "Clear:both;" ></div>7<div style= "float:right; padding:0 20px 5px 0; " ><input type= "button" value= "new" onclick= "InsertRows ()"/></div>8 9<table border= "0" cellpadding= "0" cellspacing= "0"Tenclass= "IN-TB margin-top5" id= "Viewtabs" > One<tr class= "In-opt" > A<th class= "IN-CTT" style= "Background-color: #f7f7f7;" -Width= "15%" > Name </th> -<th class= "IN-CTT" style= "Background-color: #f7f7f7;" theWidth= "15%" > Units </th> -<th class= "IN-CTT" style= "Background-color: #f7f7f7;" -Width= "40%" > Resume Highlights </th> -<th class= "IN-CTT" style= "Background-color: #f7f7f7;" +Width= "15%" > is mentor </th> -<th class= "IN-CTT" style= "Background-color: #f7f7f7;" +Width= "15%" > Operations </th> A</tr> at<c:foreach items= "${bean.teams}"var= "Team" varstatus= "I" > -<tr id= "_tr_${i.index}" class= "In-opt" > -&LT;TD class= "IN-CTT" > -<input name= "Teams[${i.index}].uname" value= "${team.uname}"/></td> -&LT;TD class= "IN-CTT" > -<input name= "Teams[${i.index}].deptname" value= "${team.deptname}"/></td> in&LT;TD class= "IN-CTT" > -<input name= "teams[${i.index}].points" value= "${team.points}" style= "width:420px;" /></td> to&LT;TD class= "IN-CTT" > +<c:ifTest= "${team.leader==1}" > -<input type= "Radio" name= "Teams[${i.index}].leader" value= "1" checked= "Checked"/> is &nbsp;&nbsp; the<input type= "Radio" name= "Teams[${i.index}].leader" value= "2"/> No *</c:if> $<c:ifTest= "${team.leader==2}" >Panax Notoginseng<input type= "Radio" name= "Teams[${i.index}].leader" value= "1"/> is &nbsp;&nbsp; -<input type= "Radio" name= "Teams[${i.index}].leader" value= "2" checked= "checked"/> No the</c:if></td> +&LT;TD class= "IN-CTT" > A<input type= "hidden" name= "Teams[${i.index}].busid" value= "${bean.id}"/> the<input type= "button" value= "delete" Name= "Del[${i.index}]" onclick= "Delrows (${i.index})" ></input></td > +</tr> -</c:forEach> $</table> $</div>

jquery dynamically adds or removes TR and TD "actual project"