隱藏一個自舉表頭

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> 

這並沒有做任何事情，我認爲CSS不能像在一個個被使用。

$('hidethis').hide(); 

對那個jquery沒有影響。

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

這是我最近的成功，但只隱藏了我的圖像th，但所有的按鈕仍然存在。

我還會放一個圖片：

我想完全隱藏所有的標記的紅色。

Answer 1

正如我評論也適用同一類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"> 
 
\t <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> 
 
\t \t <table id="scale_missed_entries" data-toggle="table" data-pagination="true" > 
 
\t \t \t <thead> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <th class="hidethis" data-field="product_id">ID</th>       
 
\t \t \t \t \t <th data-field="product_weight">Weight</th> 
 
\t \t \t \t \t <th data-field="product_added_date">Added date</th> 
 
\t \t \t \t \t <th data-field="button">Image</th> 
 
\t \t \t \t </tr> 
 
\t \t \t </thead> 
 
\t \t \t <tbody> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td class="hidethis" data-field="product_id">112</td>       
 
\t \t \t \t \t <td data-field="product_weight">51</td> 
 
\t \t \t \t \t <td data-field="product_added_date">2017-10-11</td> 
 
\t \t \t \t \t <td data-field="button">hi1</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td class="hidethis" data-field="product_id">111</td>       
 
\t \t \t \t \t <td data-field="product_weight">50</td> 
 
\t \t \t \t \t <td data-field="product_added_date">2017-10-10</td> 
 
\t \t \t \t \t <td data-field="button">hi</td> 
 
\t \t \t \t </tr> 
 
\t \t \t </tbody> 
 
\t \t </table> 
 
\t </div> 
 
</div>

注： - 無jQuery的，你也可以現在然後通過CSS隱藏： -

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

Answer 2

只需使用基於COMENT這

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

編輯

要隱藏整列使用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>

Answer 3

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

地址：

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

希望它能幫助。

Answer 5

我試着讓我的代碼儘可能簡單，並且還包含一些評論。

我會考慮使用一個類，而不是一個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>