我正在使用 Twitter Bootstrap v 2.0.1 并为我的表提供了 table-striped 类。如果单击,我正在尝试更改行颜色。除了没有条纹颜色的每个第 n:th 行之外,这很好用。我假设我需要先移除条纹颜色,但我的尝试失败了。知道我错过了什么吗?
HTML
<table class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Data 1</strong></td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td><strong>Data 1</strong></td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td><strong>Data 1</strong></td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
我的 jQuery 尝试:
<script type="text/javascript">
$(document).ready(function(){
$('tr').click( function() {
$(this).siblings().removeClass('table-striped');
//$(this).css('background-color', '#ff0000').siblings().removeClass('table-striped');
});
});
</script>
我做错了什么?
最佳答案
因为它们是使用 tr:nth-child(odd) td
创建的,我们不能简单地“删除”table-striped 类,因为它会影响整个表格。
创建你自己的类比方说:.highlightBG { background:#5279a4; }
改为这样做:
$('table.table-striped tr').on('click', function () {
$(this).find('td').addClass('highlightBG');
// potentially even .toggleClass('highlightBG'); to alternate it
});
关于jquery - 如何从 Twitter Bootstrap 表中删除背景 tr 颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12624472/