Jquery의 테이블 요소에 대한 작업

1.Jquery가 테이블을 생성합니다

/**
 * 创建表格
 * @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

부록 1: 라벨과 데이터의 데이터 구조

//label.json
['事项编码','事项名称']

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

2.Jquery가 테이블 데이터를 채웁니다

테이블 데이터 채우기를 위한 전제 조건에 유의하세요. is : html 테이블 행 및 열 요소가 생성되었습니다.

/**
*填充表格数据前提是：已经创建好了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

는 주로 동적 테이블, 즉 데이터 행과 행에 사용됩니다. 테이블은 고정되어 있지 않으며 Ajax가 데이터를 채웁니다.

참고: 여기서 테이블이 재설정되므로 첫 번째 행(헤더 행)을 제외한 모든 행이 삭제되고 데이터 행이 추가됩니다.

//

가 원본 테이블의 행과 셀을 삭제하지 않으면 는 새 데이터 행을 추가 만 하고 은 덮어쓰지 않습니다 .

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);
        }
    });
}

부록 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%"]}

핵심 포인트

: Jquery가 테이블 행을 숨길 때 92cee25da80fac49f6fb6eec5fd2c22aca745a59da05f784b8811374296574e1 태그 숨김이 필요합니다a34de1251f0d9fe1e645927f19a896e8fd273fcf5bcad3dfdad3c41bd81ad3e5 그렇지 않으면 스타일이 파괴됩니다. Html 예:

<!-- 注意用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>

위 내용은 Jquery의 테이블 요소에 대한 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!