205 votos

¿Cómo obtener el valor de la celda de una tabla utilizando jquery?

Estoy intentando averiguar cómo obtener el valor de la celda de una tabla para cada fila utilizando 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 aunque la tabla de bucles y obtener el valor de la columna "Id de cliente" para cada fila.

En el código a continuación he trabajado eso i necesita hacer esto para conseguirlo bucle aunque cada fila, cliente no está seguro cómo obtener el valor de la primera celda de la fila.

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

¡ Muchas gracias!

295voto

Jennifer Puntos 2603

Si se puede, es recomendable el uso de un atributo de clase en el TD que contiene el ID de cliente de modo que se puede escribir:

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

Esencialmente, es el mismo que el de otras soluciones (posiblemente porque me copypasted), pero tiene la ventaja de que no es necesario cambiar la estructura de su código si usted se mueve alrededor de las columnas, o incluso poner el ID de cliente en un < span >, siempre que mantenga el atributo class con ella.

Por cierto, creo que se podría hacer en un selector de:

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

Si eso hace las cosas más fáciles

125voto

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

Lo que se hace es recorrer todos los trs en la mesa, encontrando el primer td en la actual p.a. en el bucle, y la extracción de su interior html.

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

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

En el código anterior, voy a recuperar el valor de la tercera fila (el índice de base cero, por lo que la primera celda índice sería 0)


He aquí cómo usted puede 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;
}

17voto

Jimmy Puntos 35501

un enfoque menos-jquerish:

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

Obviamente esto puede cambiarse para trabajar con las células no-la-primero.

7voto

Strelok Puntos 18453
$('#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();
  }
});

4voto

MOH3n MOH Puntos 31

¿Y no usas id para esa columna? decir que:

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

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X