¿Cómo obtener un valor de celda de tabla usando jQuery?

213

Estoy tratando de averiguar cómo obtener el valor de la celda de la tabla para cada fila usando jQuery.

Mi mesa se ve así:

<table id="mytable">
  <tr>
    <th>Customer Id</th>
    <th>Result</th>
  </tr>
  <tr>
    <td>123</td>
    <td></td>
  </tr>
  <tr>
    <td>456</td>
    <td></td>
  </tr>
  <tr>
    <td>789</td>
    <td></td>
  </tr>
</table>

Básicamente quiero recorrer la tabla y obtener el valor de la Customer Idcolumna para cada fila.

En el siguiente código, he deducido que necesito hacer esto para que se repita en cada fila, pero no estoy seguro de cómo obtener el valor de la primera celda de la fila.

$('#mytable tr').each(function() {
    var cutomerId = 
}

jquery

— Sean Taylor
fuente

44

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

— Satinder singh

306

Si puede, puede valer la pena usar un atributo de clase en el TD que contenga la ID del cliente para que pueda escribir:

$('#mytable tr').each(function() {
    var customerId = $(this).find(".customerIDCell").html();    
 });

Esencialmente, esto es lo mismo que las otras soluciones (posiblemente porque copié y pegué), pero tiene la ventaja de que no necesitará cambiar la estructura de su código si se mueve alrededor de las columnas, o incluso coloca la identificación del cliente en un <span>, siempre que mantenga el atributo de clase con él.

Por cierto, creo que podrías hacerlo en un selector:

$('#mytable .customerIDCell').each(function() {
  alert($(this).html());
});

Si eso facilita las cosas.

— Jennifer
fuente

44

Yo diría $ ('# mytable td.customerIDCell'). Each (function () {alert ($ (this) .html ());}); pero +1

— Matt Briggs

:-) gracias, pero ¿qué pasa si quieres ponerlo en un lapso (puedo haber formateado mal el lapso en mi respuesta!)

— Jennifer

2

Usar la clase en el tr es especialmente útil si tienes <td> dentro de un <tfoot> (o estás usando <td> en lugar de <th>) y no quieres esos.

— Frank Luke

$ ('# mytable tr'). each (function () {var customerId = $ (this) .find (". customerIDCell"). html ();});

— Osama khodrog

pero si quiero obtener el tr html también, entonces qué podemos hacer

— desarrollador

132

$('#mytable tr').each(function() {
    var customerId = $(this).find("td:first").html();    
});

Lo que está haciendo es iterar a través de todos los trs en la tabla, encontrar el primer td en el tr actual en el bucle y extraer su html interno.

Para seleccionar una celda en particular, puede hacer referencia a ellas con un índice:

$('#mytable tr').each(function() {
    var customerId = $(this).find("td").eq(2).html();    
});

En el código anterior, recuperaré el valor de la tercera fila (el índice está basado en cero, por lo que el índice de la primera celda sería 0)

Así es como puedes hacerlo sin jQuery:

var table = document.getElementById('mytable'), 
    rows = table.getElementsByTagName('tr'),
    i, j, cells, customerId;

for (i = 0, j = rows.length; i < j; ++i) {
    cells = rows[i].getElementsByTagName('td');
    if (!cells.length) {
        continue;
    }
    customerId = cells[0].innerHTML;
}

— Andreas Grech
fuente

1

Gracias, esto fue más útil para mí ya que no tengo control sobre el marcado del documento que deseo analizar usando jQuery. Así que poder usar "td: first", "td: last", etc. fue de gran ayuda.

— atomicules

1

eq (2) obtendría el valor de la tercera columna, no la tercera fila.

— live-love

¿Qué es eq (2) en su código? Quiero decir 2 es el índice de qué td o tr?

— TechnicalKalsa

@Singh El elemento en el índice 2 de la tdcolección devuelto por la find("td")función.

— Andreas Grech

Me gusta la opción 2 con el índice como referencia, mi violín aquí

— HattrickNZ

18

Un enfoque menos jquerish:

$('#mytable tr').each(function() {
    if (!this.rowIndex) return; // skip first row
    var customerId = this.cells[0].innerHTML;
});

esto obviamente se puede cambiar para que funcione con las celdas que no son las primeras.

— Palanqueta
fuente

8

$('#mytable tr').each(function() {
  // need this to skip the first row
  if ($(this).find("td:first").length > 0) {
    var cutomerId = $(this).find("td:first").html();
  }
});

— Strelok
fuente

2

No es necesario omitir la primera fila, ya que contiene <th>, no <td>, por lo que sus datos no se extraerán

— Andreas Grech

7

Prueba esto,

$(document).ready(function(){
$(".items").delegate("tr.classname", "click", function(data){
            alert(data.target.innerHTML);//this will show the inner html
    alert($(this).find('td:eq(0)').html());//this will alert the value in the 1st column.
    });
});

— Nikhil Dinesh
fuente

1

del segundo elemento, no el primero, la ecuación comienza en 0

— Claudiu Creanga

4

¿No usas id para esa columna? dilo:

    <table width="300" border="1">
          <tr>
            <td>first</td>
          </tr>
          <tr>
            <td>second</td>
          </tr> 
          <tr>
            <td>blah blah</td>
            <td>blah blah</td>
            <td id="result">Where the result should occur</td>
          </tr>
    </table>


<script type="text/javascript">
        $('#result').html("The result is....");
</script>

— MOH3n MOH
fuente

4

Esto funciona

$(document).ready(function() {
    for (var row = 0; row < 3; row++) {
        for (var col = 0; col < 3; col++) {
            $("#tbl").children().children()[row].children[col].innerHTML = "H!";
        }
    }
});

— David
fuente

2

prueba esto :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>

<script type="text/javascript"><!--

function getVal(e) {
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;

    alert(targ.innerHTML);
}

onload = function() {
    var t = document.getElementById("main").getElementsByTagName("td");
    for ( var i = 0; i < t.length; i++ )
        t[i].onclick = getVal;
}

</script>



<body>

<table id="main"><tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
</tr><tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
</tr><tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
</tr></table>

</body>
</html>

— mohammad
fuente

2

$(document).ready(function() {
     var customerId
     $("#mytable td").click(function() {
     alert($(this).html());
     });
 });

— jithin
fuente

2

Un ejemplo de trabajo: http://jsfiddle.net/0sgLbynd/

<table>
<tr>
    <td>0</td>
    <td class="ms-vb2">1</td>
    <td class="ms-vb2">2</td>
    <td class="ms-vb2">3</td>
    <td class="ms-vb2">4</td>
    <td class="ms-vb2">5</td>
    <td class="ms-vb2">6</td>
</tr>
</table>


$(document).ready(function () {
//alert("sss");
$("td").each(function () {
    //alert($(this).html());
    $(this).html("aaaaaaa");
});
});

— Gazmend Hoxha
fuente