Hide all Table Rows expect one selected

Question

I have a table within my Spring MVC web application that uses JSP to serve up the data, the table is a dynamically loaded list of jobs to be worked on, what I am trying to do is when the table row is selected change the color of the Row to red and hide all other rows in the table.

The rows are getting highlighted but when I try to hide the rows I have no success, any ideas or help is much appreciated , please she what I have tried below with table structure. Thank You

What happens when table data link is pressed is a form is opened with table data passed to form

Table:

<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 code:

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


            }

        });

});

Other way I approached:

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

      });
});

I have researched solutions on SO and on-line with no joy including this one: How to hide all tr from table except clicked one

Please if you decide to down-vote my question please provide a reason as to why and we can try rectify the issue, thanks for your time, let me know if need anything else. Jason

Answer 1

There are a few issues with your code.
1. You are not attaching click event handler for the table row. You are writing the logic inside window onload event which won't trigger when you click on a row.
2. You do not have any element with id service_id . I assume you are trying to get the content of the cell with data-title="Service Id"
3. val() is used to get the value of input, select or textarea elements. To get content of cell, you need to use text() or .html() . See jquery documentation to understand the difference.
4. You have wrapped each row in a tbody tag. As such, calling sibling() on the row elements will return empty collection.

Here is the working plunker: https://plnkr.co/edit/O33Xnwvg3yslLkG3DeHT?p=info