隐藏一个引导程序表头

Question

我的表标题看起来像这样：

 <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> 

我想用id =“ hidethis”完全隐藏整个ID列。

我试过了

<th id="hidethis" data-field="product_id" style="display:none;">ID</th>

这没有做任何事情，我认为不能像在th中那样使用css。

$('hidethis').hide();

对该jquery也没有影响。

$('td:nth-child(2),th:nth-child(2)').hide();

我获得的最接近的成功，但这只是隐藏了我的Image th，但是我所有的按钮都保留在那里。

我还将放一张照片：

我要完全隐藏所有标有红色的标记。

Answer 1

我试图使我的代码尽可能简单，并且还包含一些注释。

我会考虑使用类而不是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> 

Answer 2

只需使用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> 

Answer 3

正如我所评论的，还对th应用相同的类，并在其中添加相应的值<td>并将其隐藏。 它会工作。

 $('.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> 

注意：-不用jquery了，现在也可以通过CSS隐藏：-

.hidethis{
  display:none; // or visibility:hidden;
}

Answer 4

只是用这个

#scale_missed_entries th:nth-child(1) {
display: none;
}

根据评论进行编辑

要隐藏整个列，请使用-

#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> 

Answer 5

加：

#hidethis { display: none; }

到你的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> 

希望能帮助到你。