使用jQuery隐藏某些表格单元格

Question

我是jQuery的新手,如果我单击一行,我想隐藏所选行的某些单元格,如果再次单击则显示回来.我到处寻找但找不到任何解决方案.大部分隐藏完整的行.这是示例表:

$('.selectme').click(function() {
  $(this).has('td.hidene').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='table1' border="1">
  <tr class='selectme'>
      <td class='donthide'>row 1, cell 1</td>
      <td class='hideme'>row 1, cell 2</td>
      <td class='hideme'>row 1, cell 3</td>
      <td class='hideme'>row 1, cell 4</td>
  </tr>
  <tr class='donthideme'>
      <td class='dontletmehide'>row 2, cell 1</td>
      <td class='dontletmehide'>row 2, cell 2</td>
  </tr>
</table>

Answer 1

当没有类时,你试图.has()在当前单击的tr上调用该函数,而是应该使用以下命令来定位子元素:$(this)tr.hideme

$('.hideme', this)
//Or
$(this).find('.hideme')

然后使用如下toggle()功能:

$('.hideme', this).toggle();

希望这可以帮助.

$('.selectme').click(function() {
    $('.hideme', this).toggle();
    //Or
    //$(this).find('.hideme').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='table1' border="1">
<tr class='selectme'>
    <td class='donthide'>row 1, cell 1</td>
    <td class='hideme'>row 1, cell 2</td>
    <td class='hideme'>row 1, cell 3</td>
    <td class='hideme'>row 1, cell 4</td>
</tr>
<tr class='donthideme'>
    <td class='dontletmehide'>row 2, cell 1</td>
    <td class='dontletmehide'>row 2, cell 2</td>
</tr>

Snippet隐藏文字:

$('.selectme').click(function() {
    $('.hideme', this).each(function(){
        if( $(this).text() == '' )
          $(this).text( $(this).data('text') );
        else{
          $(this).data('text', $(this).text());
          $(this).text('');
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='table1' border="1">
<tr class='selectme'>
    <td class='donthide'>row 1, cell 1</td>
    <td class='hideme'>row 1, cell 2</td>
    <td class='hideme'>row 1, cell 3</td>
    <td class='hideme'>row 1, cell 4</td>
</tr>
<tr class='donthideme'>
    <td class='dontletmehide'>row 2, cell 1</td>
    <td class='dontletmehide'>row 2, cell 2</td>
</tr>