隐藏除一个以外的所有行/双击表格行时显示其余行答案

【问题标题】：Hide all rows but one/Show rest rows on double click at table row隐藏除一个以外的所有行/双击表格行时显示其余行
【发布时间】：2017-09-11 04:47:33
【问题描述】：

我正在尝试在 html 表格行上使用显示/隐藏机制。当我双击表格行时，它添加了detail 类，其余表格行被隐藏。

代码如下：

<table class='container'>
    <tr>
        <th>ID</th>
        <th>ID1</th>
        <th>Title</th>
    </tr>
    <tr id='7305' class='testtr'>
        <td>7305</td>
        <td>7305</td>
        <td>Title1</td>
    </tr>
    <tr id='7381' class='testtr'>
        <td>7381</td>
        <td>7381</td>
        <td>Title2</td>
    </tr>
    <tr id='8573' class='testtr'>
        <td>8573</td>
        <td>8573</td>
        <td>Title3</td>
    </tr>
</table>

第一步有效，但我无法自己修复第二步。这样做：

<script>
     $(function () {
        $("table").colResizable({ liveDrag: true });
     });

     $('.testtr').dblclick(function () {
       $('.testtr').hide();
       $('.testtr').not(this).addClass('hidden');
       $(this).show();
     });
     $('.testr.detail').dblclick(function () {
       $('hidden').toggle();
       $(this).removeClass('detail');
     });
</script>

就像我说的，我可以隐藏除一个以外的所有行...但我无法取消隐藏隐藏的行。你能帮忙吗？

【问题讨论】：

.testr.detail - 是错字吗？此外，它也不起作用，因为在执行脚本时.testtr.detail 不存在（我假设它是在页面加载时执行的）。使用类似$(document).on('dblclick', '.testtr.detail', function(){...})
使用$('.hidden').toggle(); 而不是$('hidden').toggle();

标签： jquery html

【解决方案1】：

使用 toggleClass 。检查此示例

    $(function () {
      //  $("table").colResizable({ liveDrag: true });
     });

     $('.testtr').dblclick(function () { 
      //  $('.testtr').hide();
        $('.testtr').not(this).toggleClass('hidden');
        $(this).toggleClass('detail');
       //$(this).show();
     });
   /*  $('.testr.detail').dblclick(function () {
       $('hidden').toggle();
       $(this).removeClass('detail');
     });*/

.hidden{
 display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='container'>
    <tr>
        <th>ID</th>
        <th>ID1</th>
        <th>Title</th>
    </tr>
    <tr id='7305' class='testtr'>
        <td>7305</td>
        <td>7305</td>
        <td>Title1</td>
    </tr>
    <tr id='7381' class='testtr'>
        <td>7381</td>
        <td>7381</td>
        <td>Title2</td>
    </tr>
    <tr id='8573' class='testtr'>
        <td>8573</td>
        <td>8573</td>
        <td>Title3</td>
    </tr>
</table>

【讨论】：

完美。谢谢。

【解决方案2】：

我认为你最后一个函数中隐藏的选择器应该是“.hidden”？

好像你忘了点。另外，您添加的课程是隐藏的，而不是您提到的详细信息，也许这也是问题所在。

【讨论】：