CSS规则不适用于jquery附加的元素

费埃克斯与

我已经搜索了类似的问题，但没有一个回答我的问题。（所有这些问题似乎都与错别字有关）

我只是为了好玩而已。我正在使用基于json数据的jquery创建一个表。问题是，附加表行不继承任何CSS规则。我觉得我之前已经读过这个的原因，特别是关于表格的原因，但是这些信息使我难以理解。

HTML：

            <table width="100%" class="" id="mytable">
                <thead>
                </thead>
                <tbody>
                <tr><td>f</td><td></td><td></td><td></td></tr>
                <tr><td>b</td><td></td><td></td><td></td></tr>
                <tr><td>a</td><td></td><td></td><td></td></tr>
                </tbody>
            </table>

CSS：

    tr:nth-child(even){background:blue}
    tr:nth-child(odd){background:green}

JS：

        // Build some test data
        var data = [];
        var cols = ['Col-A','Col-B','Col-C','Col-D'];
        for (i=0;i<10;i++){
            data.push(['A_'+i,'B_'+i,'C_'+i,'D_'+i]);
        }
        // data that would be sent to 
        var json = JSON.stringify({columns:cols, data:data});


        // build the table
        $('#mytable').tables(json);


    });


    // the magic function
    jQuery.fn.tables = function(json) {
        var obj = JSON.parse(json);
        var head = this.find('thead');
        var bod  = this.find('tbody');

        // Build columns
        head.append('<tr>');
        for (i=0;i<obj.columns.length;i++){
            head.append('<th>'+obj.columns[i]+'</th>');

        }
        head.append('</tr>');

        // Add row data
        for (i=0;i<obj.data.length;i++){
            bod.append('<tr>');
            for(j=0;j<obj.data[i].length;j++){
                bod.append('<td>'+obj.data[i][j]+'</td>');
            }
            bod.append('</tr>');    
        }

        return this;
    }

拉兹万·西奥多（Razvan Theodor）

使用此代码，您不必一次附加一行，而只能添加片段。您将期望呈现什么？

head.append('<tr>');
...
head.append('</tr>');

为此，魔术函数应该是这样的：

    // the magic function
    jQuery.fn.tables = function(json) {
        var obj = JSON.parse(json);
        var head = this.find('thead');
        var bod  = this.find('tbody');



        // Build columns
        var row = '<tr>';
        for (i=0;i<obj.columns.length;i++){
            row += '<th>'+obj.columns[i]+'</th>';
        }
        row += '</tr>';

        head.append(row); // append the full row

        // Add row data
        row = '';
        for (i=0;i<obj.data.length;i++){
            row += '<tr>';
            for(j=0;j<obj.data[i].length;j++){
                row += '<td>'+obj.data[i][j]+'</td>';
            }
            row += '</tr>';
        }

        bod.append(row); // append the full row

        return this;
    }

一次附加一整行的功能。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。