¿Cómo seleccionar la última fila de una tabla usando jQuery?

Dada una tabla HTML y la tarea es seleccionar la última fila de la tabla con la ayuda de jQuery. Hay dos enfoques que se analizan a continuación con el ejemplo adecuado.

Enfoque 1: Primero, seleccione la tabla por su ID. Use el método find() para encontrar todas las filas de la tabla. Use el método last() para obtener la última fila de la tabla. Se ha cambiado el color de fondo del último elemento para ver el efecto.

Ejemplo:

<!DOCTYPE HTML> 
<html> 
    <head> 
    <title> 
        How to select the last row of
        a table using jQuery?
    </title> 
    <script src = 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </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>                    

Producción:

Enfoque 2: Use $(‘table tr:last’) jQuery Selector para encontrar el último elemento de la tabla. La ‘tabla’ en la consulta busca el elemento de la tabla, luego ‘tr’ busca todas las filas en el elemento de la tabla y ‘:last’ busca la última fila de la tabla.

Ejemplo:

<!DOCTYPE HTML> 
<html> 
    <head> 
    <title> 
        How to select the last row of
        a table using jQuery?
    </title> 
    <script src = 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </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>                    

Producción:

jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta