Store Jquery table column

Navigation
2

Currently I store the data of a table in an array, in the following way, bringing the td, in what way can I bring a particular column? 

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>

I currently return all the data in the table and I just need the name, In what way can I bring only the column name?

    
asked by Javier Antonio Aguayo Aguilar 15.05.2017 в 17:32
source

4 answers

2

in your selector to make the .each() you can leave it in the following way: 

$('#table tbody tr')

you are indicating that you are going to go through all the elements of the body of the table, now to insert the information in the array you have to look for the element td especially the first one 

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

your code working: 

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>
    
answered by 15.05.2017 / 17:49
source
1

You have to use a way to identify that your data belongs to a certain column, in this example I use a class called columnaNombre that I assign to each box of the table that is just in the Name column: 

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>

I even added the apellidoColumna class in case you only use the data in the last column.

    
answered by 15.05.2017 в 17:45
1

What if all those who have a name put a class "name"? and the last name a "surname" class? 

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>

So you can better manage your arrangement, knowing which are names, and which are last names in case of replicating also for surname. The advantage is that if the index 1 of name will be "Juan", the index 1 of surname will be "Perez".

If you run show, it will appear that they are both saved c:

I hope it helps: D

    
answered by 15.05.2017 в 17:45
0

You have several possibilities:

  • Put an identifier to the column you want to bring and include it in the 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>
  • Using CSS selectors 

$(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>
    
answered by 15.05.2017 в 17:44
problem when running apk on cell phone What is the difference between StringBuilder and StringBuffer? in Java