[英]Hide one bootstrap table header
My table header is looking like this:- 我的表标题看起来像这样:
<div role="tabpanel" class="tab-pane" id="missed-entries"> <div class="container"> <div class="panel panel-info" style="margin-top:24px;"> <div class="panel-heading"> <h3 class="panel-title">Info</h3> </div> <div class="panel-body">blahh</div> </div> <table id="scale_missed_entries" data-toggle="table" data-pagination="true" > <thead> <tr> <th id="hidethis" data-field="product_id">ID</th> <th data-field="product_weight">Weight</th> <th data-field="product_added_date">Added date</th> <th data-field="button">Image</th> </tr> </thead> </table> </div> </div>
I want to full hide this entire ID column with the id="hidethis". 我想用id =“ hidethis”完全隐藏整个ID列。
What I tried : 我试过了
<th id="hidethis" data-field="product_id" style="display:none;">ID</th>
this didn't do anything, I think that css cannot be used like that in a th. 这没有做任何事情,我认为不能像在th中那样使用css。
$('hidethis').hide();
No impact with that jquery also. 对该jquery也没有影响。
$('td:nth-child(2),th:nth-child(2)').hide();
The closest success I had with this, but that only hidden my Image th, but all my buttons remained there. 我获得的最接近的成功,但这只是隐藏了我的Image th,但是我所有的按钮都保留在那里。
I will also put a picture: 我还将放一张照片:
I want to full hide all of the marked with red. 我要完全隐藏所有标有红色的标记。
I've tried to make my code as easy as possible and also included some comments. 我试图使我的代码尽可能简单,并且还包含一些注释。
I would consider using a class instead of an id though. 我会考虑使用类而不是ID。 :)
:)
// Save index (position) of th const cellIndex = $('#hidethis').index(); // Hide th first $('#hidethis').hide(); // Iterate over each table row $('#scale_missed_entries tbody tr').each(function () { // Select the cell with same index (position) as the table header const cell = $(this).children('td').get(cellIndex); // Hide 'em $(cell).hide(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div role="tabpanel" class="tab-pane" id="missed-entries"> <div class="container"> <div class="panel panel-info" style="margin-top:24px;"> <div class="panel-heading"> <h3 class="panel-title">Info</h3> </div> <div class="panel-body">blahh</div> </div> <table id="scale_missed_entries" data-toggle="table" data-pagination="true"> <thead> <tr> <th id="hidethis" data-field="product_id">ID</th> <th data-field="product_weight">Weight</th> <th data-field="product_added_date">Added date</th> <th data-field="button">Image</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </tbody> </table> </div> </div>
Simply using CSS
只需使用
CSS
[data-field="product_id"] { display: none; } tr td:nth-of-type(1) { display: none; }
<div role="tabpanel" class="tab-pane" id="missed-entries"> <div class="container"> <div class="panel panel-info" style="margin-top:24px;"> <div class="panel-heading"> <h3 class="panel-title">Info</h3> </div> <div class="panel-body">blahh</div> </div> <table id="scale_missed_entries" data-toggle="table" data-pagination="true"> <thead> <tr> <th id="hidethis" data-field="product_id">ID</th> <th data-field="product_weight">Weight</th> <th data-field="product_added_date">Added date</th> <th data-field="button">Image</th> </tr> <tr> <td>1 </td> <td>10 </td> <td>100 </td> <td>1000 </td> </tr> </thead> </table> </div> </div>
As i commented also apply a same class to th
and there corresponding values <td>
and hide them. 正如我所评论的,还对
th
应用相同的类,并在其中添加相应的值<td>
并将其隐藏。 it will work. 它会工作。
$('.hidethis').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div role="tabpanel" class="tab-pane" id="missed-entries"> <div class="container"> <div class="panel panel-info" style="margin-top:24px;"><div class="panel-heading"> <h3 class="panel-title">Info</h3> </div><div class="panel-body">blahh</div></div> <table id="scale_missed_entries" data-toggle="table" data-pagination="true" > <thead> <tr> <th class="hidethis" data-field="product_id">ID</th> <th data-field="product_weight">Weight</th> <th data-field="product_added_date">Added date</th> <th data-field="button">Image</th> </tr> </thead> <tbody> <tr> <td class="hidethis" data-field="product_id">112</td> <td data-field="product_weight">51</td> <td data-field="product_added_date">2017-10-11</td> <td data-field="button">hi1</td> </tr> <tr> <td class="hidethis" data-field="product_id">111</td> <td data-field="product_weight">50</td> <td data-field="product_added_date">2017-10-10</td> <td data-field="button">hi</td> </tr> </tbody> </table> </div> </div>
Note:- without jquery also you can now hide then through css:- 注意:-不用jquery了,现在也可以通过CSS隐藏:-
.hidethis{
display:none; // or visibility:hidden;
}
Just use this 只是用这个
#scale_missed_entries th:nth-child(1) {
display: none;
}
edit based on the coment 根据评论进行编辑
To hide entire column use this-- 要隐藏整个列,请使用-
#hidethis{
display:none;
}
#myTable th:nth-child(1) { display: none; } #hidethis{ display:none; }
<div role="tabpanel" class="tab-pane" id="missed-entries"> <div class="container"> <div class="panel panel-info" style="margin-top:24px;"><div class="panel-heading"> <h3 class="panel-title">Info</h3> </div><div class="panel-body">blahh</div></div> <table id="scale_missed_entries" data-toggle="table" data-pagination="true"> <thead> <tr> <th id="hidethis" data-field="product_id">ID</th> <th data-field="product_weight">Weight</th> <th data-field="product_added_date">Added date</th> <th data-field="button">Image</th> </tr> <tr> <td id="hidethis">1 </td> <td>10 </td> <td>100 </td> <td>1000 </td> </tr> </thead> </table> </div> </div>
Add: 加:
#hidethis { display: none; }
to your css: 到你的css:
#hidethis { display: none; }
<div role="tabpanel" class="tab-pane" id="missed-entries"> <div class="container"> <div class="panel panel-info" style="margin-top:24px;"> <div class="panel-heading"> <h3 class="panel-title">Info</h3> </div> <div class="panel-body">blahh</div> </div> <table id="scale_missed_entries" data-toggle="table" data-pagination="true"> <thead> <tr> <th id="hidethis" data-field="product_id">ID</th> <th data-field="product_weight">Weight</th> <th data-field="product_added_date">Added date</th> <th data-field="button">Image</th> </tr> </thead> </table> </div> </div>
Hope it helps. 希望能帮助到你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.