我将Bootstrap与数据表配合使用,并希望使用纯CSS隐藏特定的表行,而 不使用任何JavaScript / jQuery。
我想,我可以这样做,但是不幸的是,它不起作用:
input[name=hide_rows] + table tr.hide-this-row {
display: table-row;
}
input[name=hide_rows]:checked + table tr.hide-this-row {
display: none;
}
<div class="form-group">
<label for="hide_rows">Hide rows?</label>
<input type="checkbox" id="hide_rows" name="hide_rows" checked>
</div>
<div class="table-responsive">
<table class="table table-condensed table-hover" id="some-table" data-order='[[ 0, "desc" ]]'>
<thead>
<tr>
<th>Head #1</th>
<th>Head #2</th>
<th>Head #3</th>
</tr>
</thead>
<tbody>
<tr class="show-this-row">
<td>Row #1</td>
<td>Row #1</td>
<td>Row #1</td>
</tr>
<tr class="hide-this-row">
<td>Row #2</td>
<td>Row #2</td>
<td>Row #2</td>
</tr>
<tr class="show-this-row">
<td>Row #3</td>
<td>Row #3</td>
<td>Row #3</td>
</tr>
@endforeach
</tbody>
</table>
</div>
请注意,Bootstrap和数据表正在其中添加一些divs
,最后,它之间还有一些HTML标记。
这就是原因,为什么我不想使用此解决方案:
input[name=hide_rows] + div > div > div > table tr.hide-this-row {
display: table-row;
}
input[name=hide_rows]:checked + div > div > div > table tr.hide-this-row {
display: none;
}
<div class="table-responsive">
<label for="hide_rows">Hide rows?</label>
<input type="checkbox" id="hide_rows" name="hide_rows" checked>
<table class="table table-condensed table-hover" id="some-table" data-order='[[ 0, "desc" ]]'>
<thead>
<tr>
<th>Head #1</th>
<th>Head #2</th>
<th>Head #3</th>
</tr>
</thead>
<tbody>
<tr class="show-this-row">
<td>Row #1</td>
<td>Row #1</td>
<td>Row #1</td>
</tr>
<tr class="hide-this-row">
<td>Row #2</td>
<td>Row #2</td>
<td>Row #2</td>
</tr>
<tr class="show-this-row">
<td>Row #3</td>
<td>Row #3</td>
<td>Row #3</td>
</tr>
@endforeach
</tbody>
</table>
</div>
我不喜欢这种解决方案,因为您必须计算并添加尽可能多的div
,而且我还不得不将复选框移到<div class="form-group">
之外和{{1 }}。
如果有一个更简单的解决方案,例如下面显示的第一个HTML代码的代码,那就更好了:
<div class="table-responsive">
不幸的是,最后的CSS代码无法正常工作。
答案 0 :(得分:1)
您可以通过在html中进行少量更改来实现此目的。如果将table-responsive
div移动到下面的form-group
复选框中,则可以隐藏行。
这是一个代码:
<div class="form-group">
<label for="hide_rows">Hide rows?</label>
<input type="checkbox" id="hide_rows" name="hide_rows" checked/>
<div class="table-responsive">
<table class="table table-condensed table-hover" id="some-table" data-order='[[ 0, "desc" ]]'>
<thead>
<tr>
<th>Head #1</th>
<th>Head #2</th>
<th>Head #3</th>
</tr>
</thead>
<tbody>
<tr class="show-this-row">
<td>Row #1</td>
<td>Row #1</td>
<td>Row #1</td>
</tr>
<tr class="hide-this-row">
<td>Row #2</td>
<td>Row #2</td>
<td>Row #2</td>
</tr>
<tr class="show-this-row">
<td>Row #3</td>
<td>Row #3</td>
<td>Row #3</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
CSS:
input[name=hide_rows] + .table-responsive .hide-this-row {
display: table-row;
}
input[name=hide_rows]:checked + .table-responsive .hide-this-row {
display: none;
}
摘要:
input[name=hide_rows] + .table-responsive .hide-this-row {
display: table-row;
}
input[name=hide_rows]:checked + .table-responsive .hide-this-row {
display: none;
}
<div class="form-group">
<label for="hide_rows">Hide rows?</label>
<input type="checkbox" id="hide_rows" name="hide_rows" checked/>
<div class="table-responsive">
<table class="table table-condensed table-hover" id="some-table" data-order='[[ 0, "desc" ]]'>
<thead>
<tr>
<th>Head #1</th>
<th>Head #2</th>
<th>Head #3</th>
</tr>
</thead>
<tbody>
<tr class="show-this-row">
<td>Row #1</td>
<td>Row #1</td>
<td>Row #1</td>
</tr>
<tr class="hide-this-row">
<td>Row #2</td>
<td>Row #2</td>
<td>Row #2</td>
</tr>
<tr class="show-this-row">
<td>Row #3</td>
<td>Row #3</td>
<td>Row #3</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
您也可以here对其进行检查