隐藏一个引导表标头

时间：2017-03-03 09:53:56

标签： javascript jquery html twitter-bootstrap

我的表格标题如下： -

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我想用id =＆＃34; hidethis＆＃34;完全隐藏整个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();

我最接近的成功，但只隐藏了我的影像，但我的所有按钮都保留在那里。

我也会画一张照片：

enter image description here

我想完全隐藏所有标有红色的内容。

5 个答案:

答案 0 :(得分：3)

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

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

答案 1 :(得分：2)

只需使用CSS

即可

＆＃13;
＆＃13; 
[data-field="product_id"] {
  display: none;
}

tr td:nth-of-type(1) {
  display: none;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：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">
	<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;
}

答案 3 :(得分：0)

请使用此

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

根据内容编辑

隐藏整个列使用此 - 

#hidethis{
display:none;
}

＆＃13;
＆＃13; 
 #myTable th:nth-child(1) {
    display: none;
       }
       
 #hidethis{
 display:none;
 }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

添加：

  

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

希望它有所帮助。

相关问题
最新问题