How to select the last row of a table using jQuery ?

Given an HTML table and the task is to select the last row of the table with the help of jQuery. There are two approaches that are discussed below with the proper example.

Approach 1: First, select the table by its ID. Use find() method to find the all table rows of the table. Use last() method to get the last row of table. The background color of the last element has been changed to see the effect.

  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE HTML> 
    <html
        <head
        <title
            How to select the last row of
            a table using jQuery?
        </title
        <script src
        </script>
        <style>
            h1 {
                color: green;
            }
        </style>
        </head
        <body
        <center>
            <h1
                GeeksforGeeks 
            </h1>
            <b>
                Click on the button to select last
                item of table
            </b>
            <table>
            <tr>
                <th>Sl.No</th>
                <th>Title</th>
                <th>Geek_id</th>
            </tr>
            <tr>
                <td>01</td>
                <td>HTML</td>
                <td>Markup Language</td>
            </tr>
            <tr>
                <td>02</td>
                <td>CSS</td>
                <td>Cascading Style</td>
            </tr>
            <tr>
                <td>03</td>
                <td>JavaScript</td>
                <td>Scripting Language</td>
            </tr>
            <tr>
                <td>04</td>
                <td>Bootstrap</td>
                <td>Framework</td>
            </tr>
            </table>
            <br>
            <button onclick = "Geeks()"
                Click here
            </button
            </center>
            <script
                function Geeks() {
                        $('table tr:last')
                        .css("background-color", "yellow");
                }
            </script
            </center>
        </body
    </html>                    

    chevron_right

    
    

  • Output:

Approach 2: Use $(‘table tr:last’) jQuery Selector to find the last element of the table. The ‘table’ in query looks for the table element then ‘tr’ is looking for all the rows in the table element and ‘:last’ is looking for the last table row of the table.

  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE HTML> 
    <html
        <head
        <title
            How to select the last row of
            a table using jQuery?
        </title
        <script src
        </script>
        <style>
            h1 {
                color: green;
            }
        </style>
        </head
        <body
        <center>
            <h1
                GeeksforGeeks 
            </h1>
            <b>
                Click on the button to select last
                item of table
            </b>
            <table>
            <tr>
                <th>Sl.No</th>
                <th>Title</th>
                <th>Geek_id</th>
            </tr>
            <tr>
                <td>01</td>
                <td>HTML</td>
                <td>Markup Language</td>
            </tr>
            <tr>
                <td>02</td>
                <td>CSS</td>
                <td>Cascading Style</td>
            </tr>
            <tr>
                <td>03</td>
                <td>JavaScript</td>
                <td>Scripting Language</td>
            </tr>
            <tr>
                <td>04</td>
                <td>Bootstrap</td>
                <td>Framework</td>
            </tr>
            </table>
            <br>
            <button onclick = "Geeks()"
                Click here
            </button
            </center>
            <script
               function Geeks() {
                      $('table tr:last')
                      .css("background-color", "yellow");
              }
            </script
            </center>
        </body
    </html>                    

    chevron_right

    
    

  • Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.