Operations on table elements in Jquery

1.Jquery creates a table

/**
 * 创建表格
 * @param label 标题 json格式，数据结构见附录1
 * @param data 数据 json格式，数据结构见附录1
 * @param parentElement html元素，表格插入至此元素中
 */
function createTable(label, data, parentElement) {
    //创建表格
    var table = $("<table> </table>");
    //也可以为元素对象设定id,class等属性.
    /*var table = $("<table>",{
                      "id"    : "tableId",
                      "class" : "table_class"
                   });*/
    //设定样式
    table.css({
        width: "98%",
        "border-collapse": "collapse",
        border: "0px solid #d0d0d0",
        margin: "3px",
        "font-size": "14px"
    });
    //标题行
    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>");
        //数据列
        $.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
['事项编码','事项名称']

//data.json
[{"code":"44530200","name":"办理《计划生育情况证明》"},
{"code":"44530200","name":"申请《再生育一胎子女审批》"},
{"code":"44530200","name":"办理《符合政策生育一孩登记》"},
{"code":"44530200","name":"办理《流动人口婚育证明》"}]

2. Jquery fills the table data

Please note that the prerequisite for filling the table data is: the html table row and column elements have been created.

/**
*填充表格数据前提是：已经创建好了html表格行列元素。
*
*如：第4行第5列不存在时，会出错。
*表格的html页面示例代码，见附录2.
*/
function fillTableData() {
        //table
        var table = $("#tableId");
        // 也可以通过嵌套了table的元素id获取table对象
        // 例如：<div id="contain_table_elementId"><table></table></div>
        //var table = $("#contain_table_elementId").find("table");

        // row cell 从1开始计数，第1行是表头，这里从第2行开始填充
        $("tr:nth-child(2) td:nth-child(2)", table).html(&#39;第2行第2列&#39;);
        $("tr:nth-child(2) td:nth-child(3)", table).html(&#39;第2行第3列&#39;);
        $("tr:nth-child(2) td:nth-child(4)", table).html(&#39;第2行第4列&#39;);
        $("tr:nth-child(2) td:nth-child(5)", table).html(&#39;第2行第5列&#39;);
        //第3行
        $("tr:nth-child(3) td:nth-child(2)", table).html(&#39;第3行第2列&#39;);
        $("tr:nth-child(3) td:nth-child(3)", table).html(&#39;第3行第3列&#39;);
        $("tr:nth-child(3) td:nth-child(4)", table).html(&#39;第3行第4列&#39;);
        $("tr:nth-child(3) td:nth-child(5)", table).html(&#39;第3行第5列&#39;);
        //第4行第5列不存在，你猜会发生什么?
        //$("tr:nth-child(4) td:nth-child(5)", table).html(&#39;第4行第5列&#39;);
   
}

Appendix 2 table.html

<table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr align="center" height="36" class="tr1">
                    <td class="td1">第1列</td>
                    <td class="td1">第2列</td>
                    <td class="td1">第3列</td>
                    <td class="td1">第4列</td>
                    <td class="td1">第5列</td>
                </tr>
                <tr align="center" height="36">
                    <td>第2行</td>
                    <!-- td-第2行已创建，你可以为其填充数据 -->
                    <td></td>
                    <td></td>
                    <td ></td>
                    <td class="td2" ></td>
                </tr>
                <tr align="center" height="36">
                    <td>第3行</td>
                    <td ></td>
                    <td ></td>
                    <td ></td>
                    <td class="td2"></td>
                </tr>
</table>
table.html

3.Jquery added (Delete) Table rows and columns

are mostly used for dynamic tables, that is, the data rows and rows of the table are not fixed, and ajax fills the data.

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

//If does not delete the rows and columns of the original table, then will only append New data rows, while is not overwriting .

function rest_table_data() {
    
    var table = $("#tableId");
    //删除原有表格行
    table.find("tr").each(function(i){
        if(i != 0){
            //表头不删
            this.remove();
        }
    });

    //添加行列数据,table_data.json 见附录3
    $.get('table_data.json', function (data) {
        // row cell 从1开始，因为明确知道数据是12行，所以i<12
        for (var i = 0; i < 12; i++) {
            //数据行
            var tr = $("<tr>", {
                align: "center",
                height: "36"
            });
            //数据列
            $.each(data, function (key, value) {
                var td = $("<td>" + value[i] + "</td>");
                td.appendTo(tr);
                if (key == "column_4") {
                    //这一列的数据，要指定样式
                    td.attr("class","td2");
                }
            });
            tr.appendTo(table);
        }
    });
}

Appendix 3 table_data.json

//按列
{"column_1":["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
"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.0%","0.0%","85.0%","51.0%","86.0%","99.0%","99.0%","86.0%","93.0%","0.0%","0.0%"]}

Key points : When Jquery hides table rows, use the tag to wrap the< that needs to be hidden /tr>, otherwise the style will be destroyed.

Html example:

<!-- 注意用tbody,不然会破坏表格样式 -->
            <tbody id="${rowId}" style="display: none" class="tableRow">
            <tr>
                <td valign="top" class="title">内容：</td>
                <td height="100" valign="top" colspan="4">
                    <textarea name="option" class="textarea" readonly="readonly">我这行需要隐藏</textarea>
                </td>
            </tr>
            </tbody>

The above is the detailed content of Operations on table elements in Jquery. For more information, please follow other related articles on the PHP Chinese website!