1 //commented out through DOM object completion2 3 /** 4 function InsertRows () {5 6 var temprow=0;7 var Tbl=document.getelementbyid ("Dicttbl");8 temprow=tbl.rows.length;9 var rows=tbl.rows;//array-like RowsTen var newrow=tbl.insertrow (tbl.rows.length);//Insert a new line One var cells=newrow.cells;//array-like Cells A for (i=0;i<3;i++)//3 columns of data per row - { - var Newcell=rows[newrow.rowindex].insertcell (cells.length); the newcell.align= "center"; - switch (i) - { - Case 0:newcell.innerhtml= "+temprow+"; + Case 1:newcell.innerhtml= "<input name=\" itemname\ "type=\" text\ "id=\" "+temprow+" \ "size=\" 45\ "maxlength= 25> "; break; - Case 2:newcell.innerhtml= "<a href= ' Javascript:deltablerow (\" "+temprow+" \ ") ' ></a> "; + A } at //alert (newcell.innerhtml); - } - } - function Deltablerow (rowNum) { - - var Tbl=document.getelementbyid ("Dicttbl"); in - if (tbl.rows.length >rownum) { to + Tbl.deleterow (rowNum); - the For (i=rownum;i<tbl.rows.length;i++) * { $ tbl.rows[i].cells[0].innerhtml=i;Panax Notoginseng tbl.rows[i].cells[2].innerhtml= "<a href= ' Javascript:deltablerow (\" "+i+" \ ") ' ></a> "; - tbl.rows[i].cells[1].childnodes[0].id=i; the } + } A } the */ + - //jquery Way $ functioninsertrows () { $ //Get Table Object - varTB1 = $ ("#dictTbl");//find the ID of the table - varTemprow = $ ("#dictTbl tr"). Size ();//get the number of rows in a table the var$tdNum = $ ("<td align= ' center ' ></td>");//Create a first TD -$tdNum. HTML (temprow);//HTML put the serial number in the first TDWuyi the var$tdName = $ ("<td align= ' center ' ></td>");//create a TD again -$tdName. HTML ("<input name=\" itemname\ "type=\" text\ "id=\" "+temprow+" \ "size=\" 45\ "maxlength=25>");//put text box Wu - var$tdDel = $ ("<td align= ' center ' ></td>");//a third TD About$tdDel. HTML ("<a href= ' Javascript:deltablerow (\" "+temprow+"\ ") ' > $ </a> ");//Add a hyperlink inside a hyperlink there's a way to delete it . - - - //Create a TR and place 3 TD into TR A var$TR = $ ("<tr></tr>"); + $tr. Append ($tdNum); the $tr. Append ($tdName); - $tr. Append ($tdDel); $ //Add the new TR at the end of the table the tb1.append ($TR); the } the the functionDeltablerow (rowNum) { - //Change line numbers and deleted line numbers in varTB1 = $ ("#dictTbl");//find the ID of the table the varTemprow = $ ("#dictTbl tr"). Size ();//get the number of rows in a table the if(Temprow >rowNum) { About //gets the object specified by the ID of the deleted row, for example: <input name=\ "itemname\" type=\ "text\" id=\ "+temprow+" \ "size=\" 45\ "maxlength=25> the$ ("#" +rownum). Parent (). Parent (). remove ();//Find the parent of the parent TD (that is, the second TD) to delete the row ID and then commit suicide jquery can commit suicide the //add 1 to look for the next ID to move the format of the following TR up the for(I= (parseint (rowNum) +1); i<temprow;i++){ + //assigning the value of I-1 to the number "I" is now the next row to delete the row assuming delete 4 I is now 5 i-1=4 " - //prev () Gets the previous sibling element immediately adjacent to each element in the matching element collection, which is optional by selecting the filter. the //the ID is in the second TD, input, so the first TD (with the numbered TD) is obtained with prev ()Bayi$ ("#" +i). Parent (). Prev (). HTML (i-1);//Modify the first TD Sequence number: Assume that delete 4 now turns the back label 5 to 4. the the //Modify the third TD: Assign the value of I-1 (that is, 4) to the deletion of the hyperlink -$ ("#" +i). Parent (). Next (). HTML ("<a href= ' Javascript:deltablerow (\" "+ (i-1) +" \ ") ' ></a> ");// - //Modify the second TD: Assigns the value of i-1 (that is, 4) to the ID of the text box, which is used to delete the attr () method to set or return the property value of the selected element. the$ ("#" +i). attr ("id", (i-1));//set the ID to i-1 the } the } the}
Add Delete table (JS complete) "own actual project"