Heim > php教程 > PHP开发 > Hauptteil

Jquery erstellt Tabellen, füllt Tabellendaten und setzt Tabellen zurück

高洛峰
Freigeben: 2016-11-23 09:31:08
Original
2132 Leute haben es durchsucht

Jquery erstellt Tabelle

/**
 * 创建表格
 * @param label 标题
 * @param data 数据
 * @param tableElement html元素,表格插入至此元素中
 */function createTable(label, data, tableElement) {    //创建表格
    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(tableElement);
}
Nach dem Login kopieren

Anhang: Datenstruktur von Etikett 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 Tabellendaten aus

function fill_table_data()
 {     
         //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开始
        $("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;);
        $("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

füllt Tabellendaten Die Voraussetzung ist: Die Zeilen- und Spaltenelemente der HTML-Tabelle wurden erstellt.

Zum Beispiel: 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行第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>
Nach dem Login kopieren

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

wird hauptsächlich für dynamische Tabellen, also Daten, verwendet Zeilen und Zeilen der Tabelle sind nicht fixiert, Ajax füllt 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 ursprünglichen Tabellendaten nicht gelöscht werden, werden neue Datenzeilen nur angehängt und nicht überschrieben.

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

    //添加行列数据
    $.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: 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


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 Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage