隱藏一個引導程序表頭

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> 

希望能幫助到你。