Question

我使用HTML创建了一个基本表。此表具有嵌套元素，当您单击每个指定的按钮时，这些元素将单独打开。所以当你点击＆＃39; +＆＃39;它会打开一个子菜单，其中包含许多表格行，其中每一个都有一个图标＆＃39; pitch＆＃39;这样就可以在点击时打开信息页面。

目前正在发生的事情是，当我点击＆＃39; +＆＃39;它显示子菜单项，以便一切正常

当我点击＆＃39;音调＆＃39;项目，我想要3件事情发生。显示＆＃39; pitch＆＃39;然后应隐藏链接和其他信息。

显示信息的行（HELLO）应该变得可见

点击后，＆＃39; - ＆＃39;按钮应该关闭信息（HELLO）部分然后进行＆＃39;音调＆＃39;行再次可见。

任何人都可以告诉我如何修改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()添加到＆＃39;音调＆＃39; <tr>
- 向-添加一个类以轻松处理事件 - 隐藏更多信息＆amp;再次显示音高

$(".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    
});

在小提琴中看到我已将class=x添加到-链接（再次显示投手）。

https://jsfiddle.net/w6dvyshj/13/（只有第一个音调有效，只有这个有class=x）

Answer 2

我已将一个类添加到“ - ”锚标记并修改了javascript：

<table border=1>
    <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="#" class="hypen">-</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="#" class="hypen">-</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="#" class="hypen">-</a></td>
        <td>
            <p>HELLO</p>
        </td>
    </tr>





</table>


$(document).ready(function(){
    $(".toggler").click(function(e){
        e.preventDefault();
        $(this).toggleClass("expand");
        var className = 'cat'+$(this).attr('data-prod-cat');
        var $current= $(this).closest('tr').next();
        while($current.hasClass(className)){
            if($(this).hasClass("expand")){
               $current.show();
               $current = $current.next().next();
            }
            else{
               $current.hide();
               $current = $current.next();
            }

        }

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

    $(".hypen").click(function(e){

        e.preventDefault();

            $(this).parent().parent().hide();
        $(this).parent().parent().prev().show();
        });

});

为“ - ”锚添加onclick事件并修改onclick事件以“picher”检查是否有帮助

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

2 个答案: