在表格行

Question

我试图在html表行上使用show / hide机制。当我双击表行时，它添加了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>

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

Answer 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>

Answer 2

我认为隐藏在上一个函数中的选择器应该是“.hidden”而不是？

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