Bir ochilish jadvali jadvalining sarlavhasini yashirish

Jadval sarlavhasi shunga o'xshash: -

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

Info

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

Ushbu to'liq ID ustunini id = "hidethis" bilan yashirishni istayman.

Men nima qildim?

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

bu hech narsa qilmadi, menimcha, bu CSS-da ham xuddi shunday foydalanilmaydi.

$('hidethis').hide();

Bu jQuery bilan ham ta'siri yo'q.

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

Bu bilan eng yaqin yutuqlarim bor edi, lekin bu faqat mening Image ni yashirgan, lekin hamma tugmalarim u erda qoldi.

Men rasmni ham qo'yaman:

enter image description here

Men qizil rang bilan belgilangan hamma narsani yashirishni xohlayman.

1
Qo'shib qo'yish kodini qo'shdim.
qo'shib qo'ydi muallif Tatu Bogdan, manba
U satrda bir xil kursdagilardan foydalaning va u qiymatlarni saqlaydi va ularni yashiradi.
qo'shib qo'ydi muallif Alive to Die, manba
Jadvalni yaratadigan kodni bera olasizmi?
qo'shib qo'ydi muallif Brent Boden, manba
Jadvalni yaratadigan kodni bera olasizmi?
qo'shib qo'ydi muallif Brent Boden, manba

7 javoblar

Kodni iloji boricha osonlashtirishga harakat qildim va ba'zi izohlar kiritdim.

Biroq, bir id o'rniga bir sinfdan foydalanishni o'ylayman. :)

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

Info

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

3
qo'shib qo'ydi

Kodni iloji boricha osonlashtirishga harakat qildim va ba'zi izohlar kiritdim.

Biroq, bir id o'rniga bir sinfdan foydalanishni o'ylayman. :)

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

Info

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

3
qo'shib qo'ydi

Simply using CSS

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

Info

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

2
qo'shib qo'ydi

As i commented also apply a same class to th and there corresponding values <td> and hide them. it will work.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

Info

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

Note:- without jQuery also you can now hide then through css:-

.hidethis{
  display:none;//or visibility:hidden;
}
1
qo'shib qo'ydi
Bu ishlagan, rahmat. Uni eng tezkor tarzda hal qilish!
qo'shib qo'ydi muallif Tatu Bogdan, manba
@TatuBogdan sizga yordam berishga xursand; :) :)
qo'shib qo'ydi muallif Alive to Die, manba

Buni faqat foydalaning

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

koment asosida tahrir qilish

Barcha ustunni yashirish uchun bu -

#hidethis{
display:none;
}

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

Info

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

0
qo'shib qo'ydi
Jadvalda ma'lumot bo'lsa, bu ishlamaydi.
qo'shib qo'ydi muallif Sankar, manba
savolning sarlavhasi sababli chalkashib ketdi. rahmat!
qo'shib qo'ydi muallif neophyte, manba

Qo'shish:

#hidethis {displey: yo'q; }

CSS-ga:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

Info

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

Umid qilamanki yordam beradi.

0
qo'shib qo'ydi

Qo'shish:

#hidethis {displey: yo'q; }

CSS-ga:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

Info

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

Umid qilamanki yordam beradi.

0
qo'shib qo'ydi
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb