Jquery table element operation-create | data fill | reset | hide row, jquerytable

Jquery table element operation-create | data fill | reset | hide row, jquerytable
1. Create a table using Jquery

/*** Create a table ** @ param label title in json format. For the data structure, see Appendix 1 * @ param data in json format. For the data structure, see Appendix 1 * @ param parentElement html, insert the table to this element */function createTable (label, data, parentElement) {// create a table var table =$ ("<table> </table> "); // You can also set attributes such as id and class for the element object. /* var table = $ ("<table>", {"id": "tableId", "class": "table_class "}); * // set the style table.css ({width: "98%", "border-collapse": "collapse", border: "0px solid # d0d0d0", margin: "3px ", "font-size": "14px"}); // Title line var tr = $ ("<tr> </tr>"); tr.css ({border: "1px solid # d0d0d0", height: "30px", color: "# FFF", background: "# 37b5ad"}); $. each (label, function (index, value) {var th = $ ("<th>" + value + "</th>"); th. appendTo (tr) ;}); tr. appendTo (table); $. each (data, function (index, row) {// var tr = $ ("<tr> </tr>"); // data column $. each (row, function (key, value) {// console.info (key + ":" + value ); var td = $ ("<td>" + value + "</td>"); td.css ({border: "1px solid # d0d0d0", height: "24px"}); td. appendTo (tr) ;}); tr. appendTo (table) ;}); table. appendTo (parentElement );}

CreateTable

 

Appendix 1: data Structure of label and data

// Label. json ['encoding ', 'item name'] // data. json [{"code": "44530200", "name": "proof of Family Planning" },{ "code": "44530200", "name ": "Apply for" regiving birth to one child "},{" code ":" 44530200 "," name ":" apply for "giving birth to one child with a policy"}, {"code": "44530200", "name": "Floating Population marriage and childbearing Certificate"}]

2. Jquery fills in table data

Please note that,Prerequisites for filling in table dataYes: the html table row and column elements have been created.

/*** Prerequisites for filling in table data: the row and column elements of the html table have been created. ** For example, if 4th rows and 5th columns do not exist, an error occurs. * Sample code of the html page of the table, see appendix 2. */function fillTableData () {// table var table = $ ("# tableId"); // You can also obtain the table object by nesting the table element id. // For example: <div id = "contain_table_elementId"> <table> </div> // var table = $ ("# contain_table_elementId "). find ("table"); // The row cell starts counting from 1, and the first row is the header. Here, the header is filled with $ ("tr: nth-child (2) td: nth-child (2) ", table).html ('row 2nd, 2nd columns '); $ (" tr: nth-child (2) td: nth-child (3 )", table).html ('row 2nd, column 3rd '); $ ("tr: nt H-child (2) td: nth-child (4) ", table).html ('row 2nd with 4th columns '); $ (" tr: nth-child (2) td: nth-child (5) ", table).html ('row 2nd, column 5th '); // 3rd rows $ (" tr: nth-child (3) td: nth-child (2) ", table).html ('row 3rd, 2nd columns '); $ (" tr: nth-child (3) td: nth-child (3 )", table).html ('row 3rd, column 3rd '); $ ("tr: nth-child (3) td: nth-child (4 )", table).html ('row 3rd, column 4th '); $ ("tr: nth-child (3) td: nth-child (5 )", table).html ('row 3rd, row 5th columns '); // column 4th in row 5th does not exist. What do you guess will happen? // $ ("Tr: nth-child (4) td: nth-child (5)", table).html ('row 4th, column 5th ');}

Appendix 2 table.html

<Table width = "100%" border = "0" cellspacing = "0" cellpadding = "0"> <tr align = "center" height = "36" class = "tr1"> <td class = "td1"> 1st columns </td> <td class = "td1"> 2nd columns </td> <td class = "td1"> 3rd columns </td> <td class = "td1"> 4th columns </td> <td class = "td1"> 5th columns </td> </tr> <tr align =" center "height =" 36 "> <td> row 2nd </td> <! -- Row td-2nd has been created, you can fill in data for it --> <td> </td> <td class = "td2"> </td> </tr> <tr align = "center" height = "36"> <td> 3rd rows </td> </td> <td> </td> <td class = "td2"> </td> </tr> </table>

Table.html

 

3. Add (delete) columns in the table using Jquery.

It is mostly used for Dynamic tables, that is, the table's data rows and columns are not fixed, and ajax fills in data.

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

// IfDo not deleteThe row and column cell of the table in the original table will onlyAppendNew data rows, whileNoOverwrite.

Function rest_table_data () {var table =$ ("# tableId"); // Delete the original table row table. find ("tr "). each (function (I) {if (I! = 0) {// the header does not delete this. remove () ;}}); // Add row and column data. For details about table_data.json, see Appendix 3 $. get ('table _ data. json', function (data) {// row cell starts from 1, because it is clear that the data is 12 rows, So I <12 for (var I = 0; I <12; I ++) {// var tr = $ ("<tr>", {align: "center", height: "36 "}); // data column $. each (data, function (key, value) {var td = $ ("<td>" + value [I] + "</td>"); td. appendTo (tr); if (key = "column_4") {// specify the style td for the data in this column. attr ("class", "td2") ;}}); tr. appendTo (table );}});}

Appendix 3 table_data.json

// By column {"column_1": ["May January", "May February", "May March", "May April", "May", "May June", "May July ", "August", "August"], "column_2": [,], "column_3": [,], "column_4": [,], "column_5 ": ["0.0%", "0.0%", "0.0%", "85.0%", "51.0%", "86.0%", "99.0%", "99.0%", "86.0% ", "93.0%", "0.0%", "0.0%"]}

4. Jquery hides table rows

Key: Jquery needs to hide table rows.Use the <tbody> </tbody> label package<Tr> </tr> to be hidden. Otherwise, the style will be damaged.

Html example:

<! -- Use tbody, otherwise it will destroy the table style --> <tbody id = "$ {rowId}" style = "display: none "class =" tableRow "> <tr> <td valign =" top "class =" title "> content: </td> <td height = "100" valign = "top" colspan = "4"> <textarea name = "option" class = "textarea" readonly = "readonly"> this line needs to be hidden </textarea> </td> </tr> </tbody>

Jquery example: coming soon

Unfinished, To be continued...