Obtenga el contenido de una fila de la tabla con un clic de botón


87

Necesito extraer los detalles de cada columna en mi tabla. Por ejemplo, columna "Nombre / Nr.".

  • La tabla contiene varias direcciones
  • La última columna de cada fila tiene un botón que permite al usuario elegir una dirección en la lista.

Problema: Mi código solo recoge el primero <td>que tiene una clase nr. ¿Cómo hago para que esto funcione?

Aquí está el bit jQuery:

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

Mesa:

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

3
Aquí hay un tutorial completo con demostración en vivo sobre cómo obtener el valor de TD de la celda de la tabla codepedia.info/jquery-get-table-cell-td-value-div
Satinder singh

Respuestas:


260

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

Responder

$(".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 centrémonos en algunas preguntas frecuentes en tales situaciones.

¿Cómo encontrar la fila más cercana?

Usando .closest():

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

Usando .parent():

También puede subir el árbol DOM usando el .parent()método. Esta es solo una alternativa que a veces se usa junto con .prev()y .next().

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

Obtener todos los <td>valores de celda de la tabla

Entonces tenemos nuestro $rowy nos gustaría generar el texto de la celda de la tabla:

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

Obtener un <td>valor específico

Similar al anterior, sin embargo, podemos especificar el índice del <td>elemento hijo .

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

  • .closest() - obtener el primer elemento que coincida con el selector
  • .parent() - obtener el padre de cada elemento en el conjunto actual de elementos coincidentes
  • .parents() - obtener los antepasados ​​de cada elemento en el conjunto actual de elementos coincidentes
  • .children() - obtener los hijos de cada elemento en el conjunto de elementos coincidentes
  • .siblings() - obtener los hermanos de cada elemento en el conjunto de elementos emparejados
  • .find() - obtener los descendientes de cada elemento en el conjunto actual de elementos coincidentes
  • .next() - obtener el hermano inmediatamente siguiente de cada elemento en el conjunto de elementos coincidentes
  • .prev() - obtener el hermano inmediatamente anterior de cada elemento en el conjunto de elementos coincidentes

¿Qué sucede si tengo una ventana emergente y quiero acceder a una tabla desde la página y eliminar la fila?
Probé

¿Puedes preparar un jsFiddle?
martynas

1
Aquí tengo un problema similar al manejar valores de ID dinámicos. Por favor, eche un vistazo a stackoverflow.com/questions/25772554/…
Sanjeev4evr

5
No sé cómo esta respuesta no es mucho más votada. Excelentes consejos! Solo quería agregar que siempre puede obtener el valor de la columna como este después de obtener la fila específica $ (this) .closest ("tr"). Find ("td: eq (2)"). Html (); Obtendrá la columna número 2. ¡Salud!
Matias

1
Todavía uso esta respuesta de vez en cuando. Realmente útil y con algunas modificaciones menores, ¡básicamente funciona con todas las tablas!
Mese

11

Prueba esto:

$(".use-address").click(function() {
   $(this).closest('tr').find('td').each(function() {
        var textval = $(this).text(); // this will be the text of each <td>
   });
});

Esto encontrará el más cercano tr(subiendo a través del DOM) del botón en el que se hizo clic actualmente y luego tdhará un bucle en cada uno ; es posible que desee crear una cadena / matriz con los valores.

Ejemplo aquí

Obtener la dirección completa usando un ejemplo de matriz aquí


10

Debe cambiar su código para encontrar la fila relativa al botón en el que se hizo clic. Prueba esto:

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

Violín de ejemplo


4
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
};

luego en tu botón:

onclick="useAdress()"

1
Eso tiene el mismo problema que el código de la pregunta: siempre obtiene la identificación de la primera fila de la tabla, independientemente del botón de la fila en el que se hizo clic.
dgvid

3

El selector ".nr:first"busca específicamente el primer elemento, y solo el primero, que tiene clase "nr"dentro del elemento de tabla seleccionado. Si en cambio llama .find(".nr"), obtendrá todos los elementos dentro de la tabla que tienen clase "nr". Una vez que tenga todos esos elementos, puede usar el método .each 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, eso le permitiría obtener todos los td.nrelementos de la tabla, no solo el de la fila en la que se hizo clic. Para limitar aún más su selección a la fila que contiene el botón en el que se hizo clic, use el método .closest , 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
    });
});

0

Buscar elemento con id en 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 );
    });
});

0
var values = [];
var count = 0;
$("#tblName").on("click", "tbody tr", function (event) {
   $(this).find("td").each(function () {
       values[count] = $(this).text();
       count++;
    });
});

Ahora la matriz de valores contiene todos los valores de celda de esa fila se puede usar como valores [0] primer valor de celda de la fila en la que se hizo clic


0

Aquí está el código completo para un ejemplo simple 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>john@example.com</td>
        <td>click</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
        <td>click</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.