Obtener el contenido de una fila de una tabla con un clic del botón

Necesito para extraer los datos de cada columna en la tabla. Por ejemplo, la columna «Nombre/Número».

  • La tabla contiene un número de direcciones
  • La última columna de cada fila tiene un botón que permite al usuario elegir de un listado de direcciones.

Problema: Mi código recoge sólo la primera <td> que tiene una clase nr. ¿Cómo puedo conseguir que esto funcione?

Aquí está el jQuery de bits:

$(".use-address").click(function() {
    var id = $("#choose-address-table").find(".nr:first").text();
    $("#resultas").append(id); //Testing: append the contents of the td to a div
});

Tabla:

<table id="choose-address-table" class="ui-widget ui-widget-content">
    <thead>
        <tr class="ui-widget-header ">
            <th>Name/Nr.</th>
            <th>Street</th>
            <th>Town</th>
            <th>Postcode</th>
            <th>Country</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="nr"><span>50</span>
            </td>
            <td>Some Street 1</td>
            <td>Leeds</td>
            <td>L0 0XX</td>
            <td>United Kingdom</td>
            <td>
                <button type="button" class="use-address" />
            </td>
        </tr>
        <tr>
            <td class="nr">49</td>
            <td>Some Street 2</td>
            <td>Lancaster</td>
            <td>L0 0XX</td>
            <td>United Kingdom</td>
            <td>
                <button type="button" class="use-address" />
            </td>
        </tr>
    </tbody>
</table>
InformationsquelleAutor chuckfinley | 2013-01-22

8 Kommentare

  1. 221

    El objeto del ejercicio es encontrar la fila que contiene la información. Cuando llegamos allí, nos puede extraer fácilmente la información requerida.

    Respuesta

    $(".use-address").click(function() {
        var $item = $(this).closest("tr")   //Finds the closest row <tr> 
                           .find(".nr")     //Gets a descendent with class="nr"
                           .text();         //Retrieves the text within <td>
    
        $("#resultas").append($item);       //Outputs the answer
    });

    VER DEMO

    Ahora vamos a centrarnos en algunas de las preguntas frecuentes en este tipo de situaciones.

    Cómo encontrar el más cercano fila?

    Utilizando .closest():

    var $row = $(this).closest("tr");

    Utilizando .parent():

    También puede mover el árbol DOM utilizando .padre() método. Esta es sólo una alternativa que se utiliza a veces, junto con .prev() y .next().

    var $row = $(this).parent()             //Moves up from <button> to <td>
                      .parent();            //Moves up from <td> to <tr>

    Llegar a todos celda de la tabla <td> valores

    Así que tenemos nuestra $row y nos gustaría que a la salida de la celda de la tabla de texto:

    var $row = $(this).closest("tr"),       //Finds the closest row <tr> 
        $tds = $row.find("td");             //Finds all children <td> elements
    
    $.each($tds, function() {               //Visits every single <td> element
        console.log($(this).text());        //Prints out the text within the <td>
    });

    VER DEMO

    Conseguir un determinado <td> valor

    Similar a la anterior, sin embargo se puede especificar el índice de el niño <td> elemento.

    var $row = $(this).closest("tr"),        //Finds the closest row <tr> 
        $tds = $row.find("td:nth-child(2)"); //Finds the 2nd <td> element
    
    $.each($tds, function() {                //Visits every single <td> element
        console.log($(this).text());         //Prints out the text within the <td>
    });

    VER DEMO

    Métodos útiles

    • .más cercano() – obtener el primer elemento que coincida con el selector de
    • .padre() – obtener la matriz de cada elemento en el conjunto actual de igualada elementos
    • .los padres() – obtener los antepasados de cada elemento en el conjunto actual de igualada elementos
    • .los niños() – los niños y niñas de cada elemento en el conjunto de elementos coincidentes
    • .hermanos() – obtener los hermanos de cada elemento en el conjunto de elementos coincidentes
    • .find() – obtener los descendientes de cada elemento en el conjunto actual de igualada elementos
    • .next() – obtener el inmediatamente siguiente hermano (a) de cada elemento en el conjunto de elementos coincidentes
    • .prev() – obtener el inmediatamente anterior a hermano (a) de cada elemento en el conjunto de elementos coincidentes
    • ¿Qué pasa si tengo un popup y quiero acceder a la tabla de la página y eliminar la fila? Traté de uno de los método, pero no funciona para mí :/
    • Se puede preparar un jsFiddle?
    • Aquí tengo problema similar whle manejo dinámico de los valores de ID. Por favor, eche un vistazo stackoverflow.com/questions/25772554/…
    • Por favor me ayudan con esta duda que tengo aquí: stackoverflow.com/questions/26004056/… (Gracias)
    • La mina está mostrando en blanco y no obtener el texto por alguna razón :/
    • No sé cómo esta respuesta no es mucho más upvoted. Excelentes consejos! Sólo quería añadir que siempre se puede obtener el valor de la columna como esta después de conseguir la fila específica $(this).más cercano(«tr»).encontrar(«td:eq(2)»).html(); Usted va a obtener el número 2 de la columna. Saludos!
    • muchas gracias. muy útil la respuesta también se pregunta así.
    • Encomiable respuesta!!!
    • Muy útil! Gracias!
    • Yo todavía uso de esta respuesta de vez en cuando. Realmente útil, y con algunas modificaciones menores, básicamente trabaja con cada mesa!!!
    • Esta es una fantástica respuesta. +99 para la integridad. Ojalá pudiera upvote más

  2. 9

    Usted necesita cambiar su código para encontrar la fila relativa al botón que ha sido pulsado. Intente esto:

    $(".use-address").click(function() {
        var id = $(this).closest("tr").find(".nr").text();
        $("#resultas").append(id);
    });

    Ejemplo de violín

  3. 2

    El selector de ".nr:first" está buscando específicamente para el primero, y sólo el primero, el elemento que tiene la clase "nr" dentro de la tabla seleccionada elemento. Si, en lugar de llamar a .find(".nr") obtendrá todos los elementos dentro de la tabla de tener clase "nr". Una vez que se tienen todos los elementos, puede utilizar el .cada método para iterar sobre ellos. Por ejemplo:

    $(".use-address").click(function() {
        $("#choose-address-table").find(".nr").each(function(i, nrElt) {
            var id = nrElt.text();
            $("#resultas").append("<p>" + id + "</p>"); //Testing: append the contents of the td to a div
        });
    });

    Sin embargo, que se le todos de la td.nr elementos en la tabla, no sólo el que está en la fila que se hizo clic. Para limitar aún más la selección de la fila que contiene el botón pulsado, el uso de la .más cercano método, así:

    $(".use-address").click(function() {
        $(this).closest("tr").find(".nr").each(function(i, nrElt) {
            var id = nrElt.text();
            $("#resultas").append("<p>" + id + "</p>"); //Testing: append the contents of the td to a div
        });
    });
  4. 2
    function useAdress () { 
    var id = $("#choose-address-table").find(".nr:first").text();
    alert (id);
    $("#resultas").append(id); //Testing: append the contents of the td to a div
    };

    a continuación, en el botón:

    onclick="useAdress()"
    • Que tiene el mismo problema que en el código de la pregunta: siempre obtiene el identificador de la primera fila en la tabla, independientemente de que el botón de la fila fue la seleccionada.
  5. 0

    Encontrar el elemento con el id de la fila usando jquery

    $(document).ready(function () {
    $("button").click(function() {
        //find content of different elements inside a row.
        var nameTxt = $(this).closest('tr').find('.name').text();
        var emailTxt = $(this).closest('tr').find('.email').text();
        //assign above variables text1,text2 values to other elements.
        $("#name").val( nameTxt );
        $("#email").val( emailTxt );
        });
    });
  6. 0
    var values = [];
    var count = 0;
    $("#tblName").on("click", "tbody tr", function (event) {
       $(this).find("td").each(function () {
           values[count] = $(this).text();
           count++;
        });
    });

    Ahora los valores de la matriz contienen todos los valores de las celdas de esa fila
    puede ser utilizado como valores[0] primer valor de la celda de la fila pulsada

  7. 0

    Aquí está el código completo de simple ejemplo de delegado

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    </head>
    <body>
    
    <div class="container">
      <h2>Striped Rows</h2>
      <p>The .table-striped class adds zebra-stripes to a table:</p>            
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
    
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John</td>
            <td>Doe</td>
            <td>[email protected]</td>
            <td>click</td>
          </tr>
          <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>[email protected]</td>
            <td>click</td>
          </tr>
          <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>[email protected]</td>
            <td>click</td>
          </tr>
    
        </tbody>
      </table>
      <script>
      $(document).ready(function(){
      $("div").delegate("table tbody tr td:nth-child(4)", "click", function(){
      var $row = $(this).closest("tr"),        //Finds the closest row <tr> 
        $tds = $row.find("td:nth-child(2)");
         $.each($tds, function() {
            console.log($(this).text());
            var x = $(this).text();
            alert(x);
        });
        });
    });
      </script>
    </div>
    
    </body>
    </html>

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea