Jquery TABLE Element Action-Create | data Fill | reset | Hide row

1.Jquery Creating a Table

/** * Create form * @param label header JSON format, data structure in Appendix 1 * @param data JSON format, data structure see Appendix 1 * @param parentelement HTML elements, table inserted into this element 
    */functioncreatetable (label, data, parentelement) {//Create a table    varTable = $ ("<table> </table>"); //You can also set properties such as Id,class for an element object.    /*var table = $ ("<table>", {"id": "TableId", "Class": "Table_class" });*/    //Set Styletable.css ({width:"98%",        "Border-collapse": "Collapse", border:"0px solid #d0d0d0", margin:"3px",        "Font-size": "14px"    }); //header row    varTR = $ ("<tr></tr>"); Tr.css ({border:"1px solid #d0d0d0", Height:"30px", Color:"#FFF", background:"#37b5ad"    }); $.each (Label,function(Index, value) {varth = $ ("<th>" + value + "</th>");    Th.appendto (TR);    });    Tr.appendto (table); $.each (data,function(index, row) {//Data Rows        varTR = $ ("<tr></tr>"); //Data Columns$.each (Row,function(key, value) {//Console.info (key + ":" + value);            varTD = $ ("<td>" + value + "</td>"); Td.css ({border:"1px solid #d0d0d0", Height:"24px"            });        Td.appendto (TR);        });    Tr.appendto (table);    }); Table.appendto (parentelement);}

Data structure of appendix 1:label and data

// Label.json [' Matter code ', ' Matter name '] // Data.json [{"Code": "44530200", "name": "For the Proof of family planning", "},{" code ":" 44530200 "," name ":" To apply for the birth of another child approval ""},{"code ":" 44530200 "," name ":" For the registration of children in accordance with the policy "},{" code ":" 44530200 "," name ":" For the floating population childbearing proof ""}]

2.Jquery Populating tabular data

Note that populating the table data is premised on the creation of an HTML table row and column element.

/** * Populate tabular data as long as the HTML table row and column elements have been created. * * if: 4th row 5th column does not exist, error occurs. * Table HTML page sample code, see Appendix 2.*/functionFill_table_data () {//Table        varTable = $ ("#tableId"); //You can also get a Table object by nesting the element ID of table        //Example: <div id= "Contain_table_elementid" ><table></table></div>        //var table = $ ("#contain_table_elementId"). Find ("table");        //Row cell counts from 1, row 1th is the table header, which is populated from line 2nd$ ("Tr:nth-child (2) td:nth-child (2)", table). html (' 2nd row, column 2nd ')); $("Tr:nth-child (2) td:nth-child (3)", table). html (' 2nd row, column 3rd '); $("Tr:nth-child (2) Td:nth-child (4)", table). html (' 2nd row, column 4th '); $("Tr:nth-child (2) Td:nth-child (5)", table). html (' 2nd row, column 5th '); //Line 3rd$ ("Tr:nth-child (3) Td:nth-child (2)", table). html (' 3rd row, column 2nd ')); $("Tr:nth-child (3) Td:nth-child (3)", table). html (' 3rd row, column 3rd '); $("Tr:nth-child (3) Td:nth-child (4)", table). html (' 3rd row, column 4th '); $("Tr:nth-child (3) Td:nth-child (5)", table). html (' 3rd row, column 5th '); //4th row 5th column does not exist, you guess what will happen?        //$ ("Tr:nth-child (4) Td:nth-child (5)", table). html (' 4th row, column 5th ');   }

Appendix 2 table.html

<Tablewidth= "100%"Border= "0"cellspacing= "0"cellpadding= "0">                <TRAlign= "Center"Height= "The "class= "TR1">                    <TDclass= "TD1">1th column</TD>                    <TDclass= "TD1">2nd Column</TD>                    <TDclass= "TD1">3rd Column</TD>                    <TDclass= "TD1">4th Column</TD>                    <TDclass= "TD1">5th column</TD>                </TR>                <TRAlign= "Center"Height= "The ">                    <TD>Line 2nd</TD>                    <!--td-Line 2nd has been created and you can populate it with data -                    <TD></TD>                    <TD></TD>                    <TD></TD>                    <TDclass= "TD2" ></TD>                </TR>                <TRAlign= "Center"Height= "The ">                    <TD>Line 3rd</TD>                    <TD></TD>                    <TD></TD>                    <TD></TD>                    <TDclass= "TD2"></TD>                </TR></Table>

3.Jquery Add (delete) Table rows

Used in dynamic tables, where data rows and columns of a table are not fixed, Ajax fills the data.

Note: Because this is the reset table, all rows except the first row (header row) are deleted, and then the data rows are added.

If you do not delete the rows row and column cells of the original table, then only new rows of data are appended , not overrides .

functionRest_table_data () {varTable = $ ("#tableId"); //Delete an existing table rowTable.find ("tr"). each (function(i) {if(I! = 0){            //table header not deleted             This. Remove ();    }    }); //add row and column data, Table_data.json see Appendix 3$.get (' Table_data.json ',function(data) {//The row cell starts at 1 because the data is explicitly known to be 12 rows, so i<12         for(vari = 0; I < 12; i++) {            //Data Rows            varTR = $ ("<tr>", {align:"Center", Height:"36"            }); //Data Columns$.each (data,function(key, value) {varTD = $ ("<td>" + value[i] + "</td>");                Td.appendto (TR); if(Key = = "Column_4") {                    //This column of data, to specify the styleTd.attr ("Class", "TD2");            }            });        Tr.appendto (table); }    });}

Appendix 3 Table_data.json

// by Column {"column_1": ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],"column_2": [ 1858,2120,3466,3513,3829,3035,2934,2761,2576,1635,0,0],"column_3": [0,0,1,46,86,69,102,82,118,61,0,0 ],"column_4": [0,0,0,39,44,59,101,81,101,57,0,0],"column_5": ["0%", "0%", "0%", "85%", " 51% "," 86% "," 99% "," 99% "," 86% "," 93% "," 0% "," 0% "]}

4.Jquery Hidden table row

Focus : jquery hides the table row, you want to use the <tbody></tbody> label package to hide the <tr></tr>, or it will break the style.

HTML Example:

<!--pay attention to using tbody, or it will break the table style-            <tbody id= "${rowid}" style= "Display:none" class= "TableRow" >            <tr >                <td valign= "Top" class= "title" > Content:</td>                <td height= "Up" valign= "Top" colspan= "4" >                    <textarea name= "option" class= "textarea" readonly= "readonly" > My line needs to be hidden </textarea>                </td>            </tr>            </tbody>

jquery Example: Please look forward to

Not finished, to be continued ...

Jquery TABLE Element Action-Create | data Fill | reset | Hide row