隐藏所有表行，期望其中一个被选中

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和在线解决方案，包括以下内容在内没有任何喜悦： 如何从表中隐藏所有tr，但单击除外

如果您决定不赞成我的问题，请提供原因，我们可以尝试解决问题，感谢您的宝贵时间，如果需要其他帮助，请告诉我。 贾森

Answer 1

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

这是工作中的矮人： https ://plnkr.co/edit/O33Xnwvg3yslLkG3DeHT ? p = info