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

隐藏所有表行，期望选择一个

1 个答案: