javascript - 在 HTML 表格中显示/隐藏表格行

Question

我使用 HTML 创建了一个基本表格。该表具有嵌套元素，当您单击每个分配的按钮时，这些元素会单独打开。因此，当您单击“+”图标时，它会打开一个子菜单，其中包含许多表格行，其中每一行都有一个图标“pitch”，点击后会打开一个信息页面。

目前发生的情况是，当我单击“+”时，它会显示子菜单项，以便一切正常

当我点击“推介”项时，我希望发生 3 件事。 然后应隐藏显示“推介”链接和其他信息的行。

然后显示信息 (HELLO) 的行应该变为可见

单击后，“-”按钮应关闭信息 (HELLO) 部分，然后再次显示“pitch”行。

谁能告诉我如何修改 Javascript/HTML 来实现这一点？

我附上了下面的代码...

<table>
<tr>
    <td></td>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 6</td>
    <td>Column 7</td>
</tr>
<tr>
    <td><a href="#" class="toggler" data-prod-cat="1">+ </a></td>
    <td>Company</td>
    <td>47</td>
    <td>123</td>
    <td>22/10</td>
    <td>***</td>
    <td></td>
    <td></td>
        <td></td>
</tr>
<tr class="cat1" style="display:none">
    <td><a href="#" class="pitcher" data-prod-cat="1">pitch </a></td>
    <td>List</td>
    <td>120</td>
    <td>105</td>
    <td>22/10</td>
     <td>***</td>
    <td>23/6/2015</td>
    <td>14.95%</td>
    <td>30%</td>
</tr>
<tr class="cat1" style="display:none">
    <td><a href="#">-</a></td>
    <td>

        <p>HELLO</p>
    </td>
</tr>
<tr class="cat1" style="display:none">
    <td><a href="#" class="pitcher" data-prod-cat="1">pitch </a></td>
    <td>List</td>
    <td>120</td>
    <td>105</td>
    <td>22/10</td>
     <td>***</td>
    <td>23/6/2015</td>
    <td>14.95%</td>
    <td>30%</td>
</tr>
<tr class="cat1" style="display:none">
     <td><a href="#">-</a></td>
    <td>
        <p>HELLO</p>
    </td>
</tr>

 <tr>
    <td><a href="#" class="toggler" data-prod-cat="1">+ </a></td>
    <td>Company</td>
    <td>48</td>
    <td>156</td>
    <td>22/10</td>
    <td>***</td>
    <td></td>
    <td></td>
        <td></td>
</tr>
<tr class="cat1" style="display:none">
    <td><a href="#" class="pitcher" data-prod-cat="1">pitch </a></td>
    <td>List</td>
    <td>156</td>
    <td>256</td>
    <td>22/10</td>
     <td>***</td>
    <td>23/6/2015</td>
    <td>16.95%</td>
    <td>30%</td>
</tr>
<tr class="cat1" style="display:none">
     <td><a href="#">-</a></td>
    <td>
        <p>HELLO</p>
    </td>
</tr>

同时附上这个 JSFiddle所以你会希望明白我的意思。

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

这应该很容易，所以:

- 添加 .hide()去“推销”<tr>
- 添加一个类到 -轻松处理事件
- 隐藏更多信息并再次显示间距

$(".pitcher").click(function(e) { 
    e.preventDefault();
    var className = 'cat'+$(this).attr('data-prod-cat');
    $(this).closest('tr').next().toggle();
    $(this).closest('tr').hide(); // add this to hide 'pitch' row
});

$('.x').click(function(e) { // link to show pitcher has class 'x'
    e.preventDefault();
    $(this).closest('tr').prev().toggle(); // show pitcher again
    $(this).closest('tr').hide(); // hide '-' link    
});

在我添加的 fiddle 中查看 class=x至 -链接(再次显示投手)。

https://jsfiddle.net/w6dvyshj/13/ (只有第一个 pitch 有效，只有这个有 class=x )