Question

我遇到一种情况，我想隐藏表的所有th相关列。

下图显示错误：

上图显示th被隐藏，但与它相关的td没有被隐藏-我的实际问题

这是 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>Coloumn</td>
        <td>two</td>
        <td>this</td>
        <td>2</td>
        <td>Coloumn</td>
        <td>two</td>
        <td>this</td>
        <td>two</td>
        <td>this</td>
        <td>Coloumn</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>

Answer 1

您已定位到th而不是td，请尝试以下代码

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

Answer 2

更短版本：

var tobeHidden = [1,2,3];

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

输出：-{https://codepen.io/anon/pen/VGReBE

Answer 3

您可以这样做，

$('#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();
             }
         });
     });
});

以上代码将检测所有隐藏的tds，并隐藏所有对应的tds。实现此目的的最简单有效的方法...

Answer 4

这将为您工作。

$('#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();
         }
    })
  });
});

Answer 5

下面的代码同时隐藏了th和td。因此，用这个替换当前的js。

  $('#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();
       }
    });

  });
});

Answer 6

您可以将其与CSS一起使用。单击按钮时只需添加一个类。随附工作片段供您参考。

就复杂性而言，也是最有效的解决方案。无需遍历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>Coloumn</td>
        <td>two</td>
        <td>this</td>
        <td>2</td>
        <td>Coloumn</td>
        <td>two</td>
        <td>this</td>
        <td>two</td>
        <td>this</td>
        <td>Coloumn</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>

Answer 7

  $('#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();
     }
  });
});

Answer 8

需要为每个td添加一个CSS类，例如“ hide-col”，将其隐藏，请遵循以下代码：

  $('#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>Coloumn</td>
        <td>two</td>
        <td>this</td>
        <td>2</td>
        <td>Coloumn</td>
        <td>two</td>
        <td>this</td>
        <td>two</td>
        <td>this</td>
        <td>Coloumn</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>

如何隐藏与jQuery中的所有列相关

8 个答案: