jquery - 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;
}
解决方案
使用此代码,您一次不会追加一整行,而只会追加片段。您期望呈现什么?
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;
}
一次追加一整行的函数。
推荐阅读
- c# - 创建数据库表不起作用 -> 存在,无法打开
- vb.net - 接收 Http Post 请求 VB.Net
- regex - 如何在 VS Code 中的特定文件中搜索?
- python - Python:用 ssh 连接替换 shell 管道并在 python 变量中取回结果
- firebase - 如何使用 Firebase SMTP 设置 GSuite 域
- ios - XCTestCase 错误
- java - 当活动发生变化时,BluetoothSocket.getInputStream() 会导致 NullPointerException
- ios - iOS 在睡眠模式下使用 iBeacon 数据包终止应用程序唤醒
- mongodb-query - 如何使用 restheart 调用从 mongodb 中删除 Json 数组
- javascript - Flask-SocketIO 在 Azure 上不起作用