2

Actualmente almaceno los datos de una tabla en un arreglo, de siguiente forma , trayendo los td, de que forma puedo traer una columna en particular?

var datos = []; 

    $("#table1 td").each(function(index) {//No se como traer solo el nombre
      // alert($(this).text());
      datos.push($(this).text()); 
      console.log(datos);
    });

<table id="table1">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Apellido</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Jorge</td>
      <td>Casas</td>    
    </tr>
     <tr>
      <td>Juan</td>
      <td>Perez</td>
    </tr>
  </tbody>
</table>

Actualmente retorno todos los datos de la tabla y solo necesito el nombre, De que forma puedo Traer solo la columna nombre ?

4 respuestas 4

2

en tu selector para hacer el .each() puedes dejarlo de la siguiente forma:

$('#table tbody tr')

estas indicando que vas a recorrer todos los elementos del cuerpo de la tabla, ahora para insertar la informacion en el arreglo hay que buscar el elemento td especialmente el primero

$(this).find('td:eq(0)').text()

tu código funcionando:

var datos = [];

$("#table1 tbody tr").each(function(index) {
  datos.push($(this).find('td:eq(0)').text());
});

console.log(datos);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Apellido</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Jorge</td>
      <td>Casas</td>
    </tr>
    <tr>
      <td>Juan</td>
      <td>Perez</td>
    </tr>
  </tbody>
</table>

1
1

Tienes que usar una forma de identificar que tus datos pertenecen a cierta columna, en este ejemplo utilizo una clase que se llama columnaNombre que la asigno a cada casilla de la tabla que esté justamente en la columna de Nombre:

var datos = []; 
var datos2 = [];

$("#table1 .nombreColumna").each(function(index) {//No se como traer solo el nombre
  datos.push($(this).text()); 
});

$("#table1 .apellidoColumna").each(function(index) {//No se como traer solo el nombre
  datos2.push($(this).text()); 
});

console.log(datos);
console.log(datos2);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1">
  <thead>
    <tr>
      <th class='encabezadoNombre'>Nombre</th>
      <th class='encabezadoApellido'>Apellido</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td class='nombreColumna'>Jorge</td>
      <td class='apellidoColumna'>Casas</td>    
    </tr>
     <tr>
      <td class='nombreColumna'>Juan</td>
      <td class='apellidoColumna'>Perez</td>
    </tr>
  </tbody>
</table>

Incluso agregué también la clase apellidoColumna por si solo ocupas los datos de la columna apellido.

1

Que tal si a todos quienes tienen nombre le colocas una clase "nombre"? y los apellido una clase "apellido"?

var datosNombre = []; 
var datosApellido = []; 

$(".nombre").each(function() {
  datosNombre.push($(this).text()); 
});


$(".apellido").each(function() {
  datosApellido.push($(this).text()); 
});

function mostrar(){
  alert(datosNombre);
  alert(datosApellido);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<table id="table1" borde="1">
      <thead>
        <tr>
          <th>Nombre</th>
          <th>Apellido</th>
        </tr>
      </thead>
    
      <tbody>
        <tr>
          <td class="nombre">Jorge</td>
          <td class="apellido">Casas</td>    
        </tr>
         <tr>
          <td class="nombre">Juan</td>
          <td class="apellido">Perez</td>
        </tr>
      </tbody>
    </table>
    
    <button onclick="mostrar()">mostrar Arreglo</button>

Así puedes manejar de mejor manera tu arreglo, sabiendo cuales son nombres, y cuales son apellidos en caso de replicar también para apellido. La ventaja es que si el indice 1 de nombre sera "Juan", el indice 1 de apellido sera "Perez".

Si ejecutas mostrar, aparecerá que están ambos guardados c:

Espero que sea de ayuda :D

0

Tienes varias posibilidades:

  • Poniendo un identificador a la columna que quieras traer e incluirlo en el selector.

$(function() {
    var datos = []; 

    $("#table1 td.name").each(function(index) {
    
      datos.push($(this).text()); 
      
    });
    
    console.log(datos);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table1">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Apellido</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td class="name">Jorge</td>
      <td>Casas</td>    
    </tr>
     <tr>
      <td class="name">Juan</td>
      <td>Perez</td>
    </tr>
  </tbody>
</table>

  • Utilizando selectores CSS

$(function() {
    var datos = []; 

    $("#table1 td:first-child()").each(function(index) {
    
      datos.push($(this).text()); 
      
    });
    
    console.log(datos);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table1">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Apellido</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Jorge</td>
      <td>Casas</td>    
    </tr>
     <tr>
      <td>Juan</td>
      <td>Perez</td>
    </tr>
  </tbody>
</table>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.