Heim > Web-Frontend > js-Tutorial > Operationen an Tabellenelementen in Jquery

Operationen an Tabellenelementen in Jquery

炎欲天舞
Freigeben: 2017-08-04 15:40:43
Original
1460 Leute haben es durchsucht

1.Jquery erstellt eine Tabelle


/**
 * 创建表格
 * @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
Nach dem Login kopieren

Anhang 1: Datenstruktur von Label und Daten


//label.json
[&#39;事项编码&#39;,&#39;事项名称&#39;]

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


2. Jquery füllt die Tabellendaten

Bitte beachten Sie, dass die Voraussetzung für das Füllen der Tabellendaten ist: Die HTML-Tabelle wurde mit Zeilen- und Spaltenelementen erstellt.


/**
*填充表格数据前提是:已经创建好了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;);
   
}
Nach dem Login kopieren


Anhang 2 Tabelle.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
Nach dem Login kopieren

3. JQuery fügt Tabellenzeilen und -spalten hinzu (löscht sie).

wird hauptsächlich für dynamische Tabellen verwendet, dh die Datenzeilen und Zeilen der Tabelle sind nicht festgelegt und Ajax füllt die Daten.

Hinweis: Da die Tabelle hier zurückgesetzt wird, werden alle Zeilen außer der ersten Zeile (Kopfzeile) gelöscht und dann die Datenzeilen hinzugefügt.

//Wenn die Zeilen und Spalten der Originaltabelle nicht löscht , dann wird nur angehängt neue Datenzeile und wird nicht überschrieben .


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

    //添加行列数据,table_data.json 见附录3
    $.get(&#39;table_data.json&#39;, 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);
        }
    });
}
Nach dem Login kopieren


Anhang 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%"]}
Nach dem Login kopieren

< tr>, andernfalls wird der Stil zerstört. Html-Beispiel:

Das obige ist der detaillierte Inhalt vonOperationen an Tabellenelementen in Jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage