使用nth-child并具有 [英] using nth-child and has
本文介绍了使用nth-child并具有的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要在tbody> tr行中包含第14个td，该行包含一个input checkbox，该行已选中以向该父级td添加一个类.我确定我已经使这件事变得复杂了，我可以得到一些帮助吗?
I need to have the 14th td in a tbody > tr row that contains a input checkbox that is checked to add a class to that parent td. I am sure I am over complicating this thing, can I get some help?
JQUERY Javascript表
var $table = $('#table-javascript').bootstrapTable({
method: 'get',
url: 'bootstrap_database.php',
height: 3849,
cache: false,
striped: true,
pagination: true,
search: true,
pageSize: 100,
pageList: [100, 200, 600, 1000],
minimumCountColumns: 2,
clickToSelect: true,
columns: [{
field: 'ID',
title: 'ID',
align: 'center',
visible: false
},{
field: 'backlink',
title: 'Backlink',
align: 'left',
width: '20'
},{
field: 'indexed',
title: 'PI',
align: 'center',
width: '20',
},{
field: 'dindexed',
title: 'DI',
align: 'center',
width: '20',
},{
field: 'moz',
title: 'MOZ',
align: 'center',
width: '20',
},{
field: 'email',
title: 'EM',
align: 'center',
width: '20'
},{
field: 'social',
title: 'SOC+',
align: 'center',
width: '20'
},{
field: 'whois',
title: 'WHO',
align: 'center',
width: '20'
},{
field: 'notes',
title: 'NT',
align: 'center',
width: '20'
},{
field: 'removed',
title: 'RM',
align: 'center',
width: '20'
},{
field: 'import_label',
title: 'SR',
align: 'center',
width: '20'
},{
field: 'important',
title: 'IM',
align: 'center',
width: '20'
},{
field: 'refresh',
title: 'RF',
align: 'center',
width: '20',
class: 'refreshstats'
},{
field: 'exempt',
title: 'EX',
align: 'center',
width: '20',
},{
field: 'spammy',
title: 'SP',
align: 'center',
width: '20',
}]
});
JQUERY
if ($('tbody tr td:nth-child(14)').has('input:checkbox:checked')) {
$(this).parent('td').addClass('spammy_color');
}
在HTML之前
<tbody class="searchable">
<tr>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" checked="checked" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" checked="checked" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" checked="checked" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" checked="checked" /></td>
</tr>
</tbody>
HTML之后
<tbody class="searchable">
<tr>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td class="spammy_color"><input type="checkbox" checked="checked" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td class="spammy_color"><input type="checkbox" checked="checked" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td class="spammy_color"><input type="checkbox" checked="checked" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td class="spammy_color"><input type="checkbox" checked="checked" /></td>
</tr>
</tbody>
推荐答案
我终于找到了答案.问题是，当尝试将样式和类似内容应用于动态生成的表(如datatable或bootstrapTable)时，您必须等到数据首先完全加载后，否则它将无法通过jquery应用样式.
I finally found my answer. The issue is when trying to apply styling and things like that to a dynamically generated table like datatable or bootstrapTable you have to wait till the data is fully loaded first or it will not apply the styling through jquery.
有效的代码
$table.on('load-success.bs.table', function () {
$('tr td:nth-child(14) :checked').parent().addClass('spammy_color');
});
这篇关于使用nth-child并具有的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
