Question

我是jQuery的新手，如果我单击一行，我想隐藏所选行的某些单元格，如果再次单击则显示回来。我到处寻找，但无法找到任何解决方案。大部分隐藏完整的行。以下是示例表：

＆＃13;

if (!$scope.searchResponse) return '';

＆＃13;

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

＆＃13;

Answer 1

当.has()没有课程$(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>

代码段仅隐藏文字

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

Answer 2

你可以这样$(this).find('td[class="hideme"]').hide(); 如果您需要toggle效果，请使用toggle()代替hide()

$('.selectme').click(function() {
     $(this).find('td[class="hideme"]').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/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>

Answer 3

你的Jquery错了。您需要隐藏单击的td，现在您正试图隐藏具有td的行。

看看我的例子：jsifddle

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

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

3 个答案: