javascript - 隐藏所有表格行，只需要选择一个

Question

我的 Spring MVC Web 应用程序中有一个表，它使用 JSP 来提供数据，该表是一个动态加载的要处理的作业列表，我想做的是当选择表行时进行更改将行的颜色设置为红色并隐藏表中的所有其他行。

行被突出显示，但当我尝试隐藏行时，我没有成功，非常感谢任何想法或帮助，请告诉她我在下面尝试过的表结构。谢谢您

按下表数据链接时会发生什么情况:打开一个表单，并将表数据传递给表单

表:

<table class="table table-hover" id="no-more-tables" style="margin-bottom: 0px;">

                <thead>
                    <tr>
                        <th>Service Id</th>
                        <th>Vehicle</th>
                        <th>Due date</th>
                        <th>ServiceType</th>
                        <th>Last update</th>
                        <th>Frequency</th>
                        <th>Start</th>
                    </tr>
                </thead>

                <tbody style="margin-bottom: 0px;">

                <tr id="table_row_id2" class="">
                    <td data-title="Service Id">2</td>
                    <td data-title="Vehicle">vehicle two</td>
                    <td data-title="Due date">2018-02-14</td>
                    <td data-title="ServiceType">Preventive Maintenance</td>
                    <td data-title="Last update">2018-02-14</td>
                    <td data-title="Frequency">Every 3 months, from finish date.</td>
                    <td data-title="Start"><a href='/inspections/?service_id=2' id="startLink">
                                                <span class="glyphicon glyphicon-plus-sign"></span>
                                        </a>  </td>
                </tr>

                <tbody style="margin-bottom: 0px;">

                <tr id="table_row_id3" class="">
                    <td data-title="Service Id">3</td>
                    <td data-title="Vehicle">VAN1</td>
                    <td data-title="Due date">2018-02-20</td>
                    <td data-title="ServiceType">Preventive Maintenance</td>
                    <td data-title="Last update">2018-02-20</td>
                    <td data-title="Frequency">Every 3 months, from finish date.</td>
                    <td data-title="Start"><a href='/inspections/?service_id=3' id="startLink">
                                                <span class="glyphicon glyphicon-plus-sign"></span>
                                        </a>  </td>
                </tr>


                </tbody>



            </table>

Jquery 代码:

$(document).ready(function() {
     $(window).on('load',function(){
        var service_id = $('#service_id').val();
            if(service_id){
                $('#serviceRow').toggle();
                $('#table_row_id'+service_id).addClass('danger');
            $('#table_row_id'+service_id).siblings().hide();


            }

        });

});

我的另一种方法:

    $(document).ready(function(){
     $(window).on('load',function(){
         $( "table tbody tr" ).siblings( ".danger" ).hide();

      });
});

我在 SO 和网上研究了解决方案，但没有任何乐趣，包括这个: How to hide all tr from table except clicked one

如果您决定否决我的问题，请提供原因，我们可以尝试纠正该问题，感谢您的宝贵时间，如果需要其他任何信息，请告诉我。杰森

Answer 1

您的代码存在一些问题。
1. 您没有为表行附加单击事件处理程序。您正在窗口 onload 事件中编写逻辑，当您单击一行时，该事件不会触发。
2. 您没有任何 id 为 service_id 的元素。我假设您正在尝试使用 data-title="Service Id"
获取单元格的内容 3. val() 用于获取input、select或textarea元素的值。要获取单元格的内容，您需要使用 text() 或 .html()。请参阅 jquery 文档以了解差异。
4. 您已将每一行包装在 tbody 标记中。因此，对行元素调用 sibling() 将返回空集合。

这是正在工作的插件:https://plnkr.co/edit/O33Xnwvg3yslLkG3DeHT?p=info