Add Delete table (JS complete) "own actual project"

Source: Internet
Author: User

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"

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.