在Bootstrap数据表中使用纯CSS3隐藏表行

时间:2018-10-03 18:05:17

标签: html css datatable

我将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代码无法正常工作。

1 个答案:

答案 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对其进行检查