引用bootstrap前端框架的table样式类class="table-striped"后,如何点击tr改变其背景色?
我们自己写的js代码,只能改变tr:even的背景色,却无法改变tr:odd的背景色!
我改怎么办呢?
解决方案如下:
一、常规的HMTL
HTML:
<table class="table table-bordered table-striped“ id="table-content">
<thead><tr>
<td >序号</td>
<td>项目名称</td>
<td >项目状态</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>项目1</td>
<td>项目状态1</td>
</tr>
<tr>
<td>1</td>
<td>项目1</td>
<td>项目状态1</td>
</tr>
</tbody>
二、无语的JS
JS:
<script>
$(function() {
$("#table-content tbody tr td").click(function() {
${jquery}(this).parent().toggleClass("clickTr");
});
});
</script>
三、蛋疼又好用的Bootstrap
CSS:
.table-striped tbody tr.clickTr:nth-child(odd) td {
background-color: red;
}
.clickTr{
background: red;
}
就这样了亲!