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

Question

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

我只是为了好玩而做这个。 我正在使用基于 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;
}

Answer 1

使用此代码，您不会一次附加一整行，而只会附加片段。您希望呈现什么？

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

一次附加一整行的函数。

Answer 2

@Razvan一针见血，但我认为有一种更惯用的方法可以做到这一点。毕竟，我们正在使用jQuery，所以我们不妨提高效率。

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>').append(obj.columns.map(e => $('<th>').text(e))));
// Add row data
obj.data.forEach(r => bod.append($('<tr>').append(r.map(e => $('<td>').text(e)))));
return this;
}

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

基本上，我使用几个链接在一起的箭头函数以及.forEach和.map将<td>和<th>元素附加到相应的行，并在单个语句中将行附加到表中。