CODEWITHSUNDEEP
javascriptjqueryhtml
EaBengaluru
EaBengaluru

Reputation: 71

how to hide th related all the columns in jquery

i have a situation where i wanted to hide all th related column for a table.

below image is showing bug:

enter image description here

the above image shows th is hidden but its related td is not hidden - my actual problem

here is codepen: https://codepen.io/anon/pen/eLXpKO

  $('#hide').click(function(){
     $($('#codexpl th').get().reverse()).each(function(index){
     var tobeHidden = [0,1,2];
     if(tobeHidden.indexOf(index) != -1){
        $(this).hide();
     }
  });
});
#codexpl th, #codexpl td{
    padding:0.8em;
    border: 1px solid;
}
#codexpl th{
    background-color:#6699FF;
    font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="codexpl">
    <tr>
        <th>#</th>
        <th>Columna</th>
        <th>Relative</th>
        <th>Isso</th>
      <th>a</th>
      <th>b</th>
      <th>c</th>
             <th>Columna</th>
        <th>Relative</th>
        <th>Isso</th>
      <th>a</th>
      <th>b</th>
      <th>c</th>
      <th>duration</th>
      <th>rate</th>
      <th>total</th>
    </tr>
    <tr>
        <td>1</td>
        <td>This</td>
        <td>Column</td>
        <td>Is</td>
        <td>1</td>
        <td>This</td>
        <td>Column</td>
        <td>Is</td>
        <td>Column</td>
        <td>Is</td>
        <td>This</td>
        <td>Column</td>
        <td>Is</td>
        <td>40</td>
        <td>900</td>
        <td>180000</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Column</td>
        <td>two</td>
        <td>this</td>
        <td>2</td>
        <td>Column</td>
        <td>two</td>
        <td>this</td>
        <td>two</td>
        <td>this</td>
        <td>Column</td>
        <td>two</td>
        <td>this</td>
        <td>30</td>
        <td>500</td>
        <td>40000</td>
    </tr>
</table>

<button id="hide" style="background:yellow;">click Hide 3 th, 3 td</button>

Upvotes: 1

Views: 231

Answers (8)

Sumodh Nair
Sumodh Nair

Reputation: 1676

You can use this with CSS. Just add a class when you click the button. Attached the working snippet for your reference.

Also, in terms of complexity, the most efficient solution. No need for iterating through the th, tds.

$('#hide').click(function(){
     $('#codexpl').addClass('hide');
});
#codexpl th, #codexpl td{
    padding:0.8em;
    border: 1px solid;
}
#codexpl th{
    background-color:#6699FF;
    font-weight:bold;
}


.hide  th:nth-last-child(-n+3)  {
  display: none;
}

.hide  td:nth-last-child(-n+3)  {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="codexpl">
    <tr>
        <th>#</th>
        <th>Columna</th>
        <th>Relative</th>
        <th>Isso</th>
      <th>a</th>
      <th>b</th>
      <th>c</th>
             <th>Columna</th>
        <th>Relative</th>
        <th>Isso</th>
      <th>a</th>
      <th>b</th>
      <th>c</th>
      <th>duration</th>
      <th>rate</th>
      <th>total</th>
    </tr>
    <tr>
        <td>1</td>
        <td>This</td>
        <td>Column</td>
        <td>Is</td>
        <td>1</td>
        <td>This</td>
        <td>Column</td>
        <td>Is</td>
        <td>Column</td>
        <td>Is</td>
        <td>This</td>
        <td>Column</td>
        <td>Is</td>
        <td>40</td>
        <td>900</td>
        <td>180000</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Column</td>
        <td>two</td>
        <td>this</td>
        <td>2</td>
        <td>Column</td>
        <td>two</td>
        <td>this</td>
        <td>two</td>
        <td>this</td>
        <td>Column</td>
        <td>two</td>
        <td>this</td>
        <td>30</td>
        <td>500</td>
        <td>40000</td>
    </tr>
</table>

<button id="hide" style="background:yellow;">click Hide 3 th, 3 td</button>

Upvotes: 0

Ramakant Shukla
Ramakant Shukla

Reputation: 147

Need to add one css class like "hide-col" for each td where you need to hide it, follow the below code:

  $('#hide').click(function(){
     $($('#codexpl th').get().reverse()).each(function(index){
     var tobeHidden = [0,1,2];
     if(tobeHidden.indexOf(index) != -1){
        $(this).hide();
     }
     $(".hide-col").css("display", "none");
  });
});
#codexpl th, #codexpl td{
    padding:0.8em;
    border: 1px solid;
}
#codexpl th{
    background-color:#6699FF;
    font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="codexpl">
    <tr>
        <th>#</th>
        <th>Columna</th>
        <th>Relative</th>
        <th>Isso</th>
      <th>a</th>
      <th>b</th>
      <th>c</th>
             <th>Columna</th>
        <th>Relative</th>
        <th>Isso</th>
      <th>a</th>
      <th>b</th>
      <th>c</th>
      <th>duration</th>
      <th>rate</th>
      <th>total</th>
    </tr>
    <tr>
        <td>1</td>
        <td>This</td>
        <td>Column</td>
        <td>Is</td>
        <td>1</td>
        <td>This</td>
        <td>Column</td>
        <td>Is</td>
        <td>Column</td>
        <td>Is</td>
        <td>This</td>
        <td>Column</td>
        <td>Is</td>
        <td class="hide-col">40</td>
        <td class="hide-col">900</td>
        <td class="hide-col">180000</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Column</td>
        <td>two</td>
        <td>this</td>
        <td>2</td>
        <td>Column</td>
        <td>two</td>
        <td>this</td>
        <td>two</td>
        <td>this</td>
        <td>Column</td>
        <td>two</td>
        <td>this</td>
        <td class="hide-col">30</td>
        <td class="hide-col">500</td>
        <td class="hide-col">40000</td>
    </tr>
</table>

<button id="hide" style="background:yellow;">click Hide 3 th, 3 td</button>

Upvotes: 0

ElusiveCoder
ElusiveCoder

Reputation: 1609

You can do it like this, 

$('#hide').click(function(){
     $($('#codexpl th').get().reverse()).each(function(index){
        var tobeHidden = [0,1,2];
        if(tobeHidden.indexOf(index) != -1){
           $(this).hide();
        }
     });
     $('#codexpl th').each(function(){
         if($(this).is(':hidden')){
             var hiddenths = $(this).index();
         }
         $('#codexpl td').each(function(index){
             if($(this).index() == hiddenths ){
                 $(this).hide();
             }
         });
     });
});

Above code will detect all the hidden th>tds and hide all the corresponding tr>tds. Most simple and efficient way to accomplish this...

Upvotes: 1

Flash Thunder
Flash Thunder

Reputation: 12036

Shorter version:

var tobeHidden = [1,2,3];

tobeHidden.forEach(function(field){
    $('#codexpl td:nth-last-child('+field+'),#codexpl th:nth-last-child('+field+')').hide();
});

Output:-https://codepen.io/anon/pen/VGReBE

Upvotes: 2

Vinit Desai
Vinit Desai

Reputation: 520

  $('#hide').click(function(){
   $($('#codexpl th').get().reverse()).each(function(index){
     var tobeHidden = [0,1,2];
     if(tobeHidden.indexOf(index) != -1){
        $(this).hide();
     }
  });
    $($('#codexpl td').get().reverse()).each(function(index){
     var tobeHidden = [0,1,2];
     if(tobeHidden.indexOf(index) != -1){
        $(this).hide();
     }
  });
    $($('#codexpl td').get()).each(function(index){
     var tobeHidden = [0,1,2];
     if(tobeHidden.indexOf(index) != -1){
        $(this).hide();
     }
  });
});

Upvotes: 0

yılmaz
yılmaz

Reputation: 1826

Following code hide both th and td. So replace your current js with this one.

  $('#hide').click(function(){
     var tobeHidden = [0,1,2];
     var tag;
     $('#codexpl tr').each(function(index){

       if(index==0){
         tag='th';
       }
       else{
         tag='td';
       }

     $($(this).find(tag).get().reverse()).each(function(index2){
       if(tobeHidden.indexOf(index2) != -1){
          $(this).hide();
       }
    });

  });
});

Upvotes: 0

ravi
ravi

Reputation: 1220

This Will Work for you.

$('#hide').click(function(){
  $('#codexpl tr').each(function(){
    $($(this).children().get().reverse()).each(function(index){
        var tobeHidden = [0,1,2];
         if(tobeHidden.indexOf(index) != -1){
            $(this).hide();
         }
    })
  });
});

Upvotes: 0

user2575725
user2575725

Reputation:

You have targeted to th and not td, try below code

  $('#hide').on('click', function() {
    $('#codexpl').find('tr').each(function() {
      $(this).children().slice(-3).hide();
    });
  });

Upvotes: 2

Related Questions