user3386779
user3386779

Reputation: 7205

get all the values of a column in a table

I have the table and with fields id,name,geo,age I want to collect name,id and age of the table which have the geo ME.

   name=   ["a","b","c"]
   id= ["1","2","3"]
   age =["30","20","42"] 

$(document).ready(function(){
 /*$(#geo tbody).find('tr').each(function( index ){
   console.log($(this).find(td:1));
  }); */
  name= new Array();
  $('#geo tbody').find('tr').each(function( ) {
 // console.log($( this).find(':nth-child(3)').text());
  if ($( this).find(':nth-child(3)').text()=='ME'){
  val= $( this).find(':nth-child(2)').text() ;
   name=$( this).find(':nth-child(2)').text() ;
   }
   //console.log(name);
});
console.log(name);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="geo">
 <thead>
   <tr>
   <th>id</th>
   <th>name</th>
   <th>geo</th>
   <th>age</th>
   </tr>
 </thead>
 <tbody>
   <tr>
   <td>1</td>
   <td>a</td>
   <td>ME</td>
   <td>20</td>
   </tr>
   <tr>
   <td>2</td>
   <td>b</td>
   <td>ME</td>
   <td>30</td>
   </tr>
   <tr>
   <td>3</td>
   <td>c</td>
   <td>ME</td>
   <td>42</td>
   </tr>
   <tr>
   <td>4</td>
   <td>d</td>
   <td>USA</td>
   <td>20</td>
   </tr>
   <tr>
   <td>5</td>
   <td>e</td>
   <td>UK</td>
   <td>22</td>
   </tr>
 </tbody>
 <tfoot>
 </tfoot>
</table>

I want to insert the value in array .now I can get only the last data.how to push the value in an array in each loop

Upvotes: 1

Views: 1140

Answers (3)

erosman
erosman

Reputation: 7751

Here is an example of plain JavaScript version ....

const id = [];
const name = [];
const age = [];

// get the tr in the tbody
document.querySelectorAll('#geo tbody tr').forEach(tr => {
  id.push(tr.children[0].textContent);
  name.push(tr.children[1].textContent);
  age.push(tr.children[3].textContent);
});

console.log(id, name, age);
<table id="geo">
  <thead>
    <tr>
      <th>id</th>
      <th>name</th>
      <th>geo</th>
      <th>age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>a</td>
      <td>ME</td>
      <td>20</td>
    </tr>
    <tr>
      <td>2</td>
      <td>b</td>
      <td>ME</td>
      <td>30</td>
    </tr>
    <tr>
      <td>3</td>
      <td>c</td>
      <td>ME</td>
      <td>42</td>
    </tr>
    <tr>
      <td>4</td>
      <td>d</td>
      <td>USA</td>
      <td>20</td>
    </tr>
    <tr>
      <td>5</td>
      <td>e</td>
      <td>UK</td>
      <td>22</td>
    </tr>
  </tbody>
  <tfoot>
  </tfoot>
</table>

Upvotes: 1

bowlnz
bowlnz

Reputation: 21

Firstly, you need to add var in name = new Array();:

var name = new Array();

Next, you need to use the .push() function to add data to the array:

name.push($(this).find(':nth-child(2)').text());

Upvotes: 1

Swati
Swati

Reputation: 28522

You can simply use .push to push values inside arrays.

Demo Code :

$(document).ready(function() {
  var age =[];
  var name = [];
  var id = [];
  $('#geo tbody').find('tr').each(function() {
    if ($(this).find(':nth-child(3)').text() == 'ME') {
      id.push($(this).find(':nth-child(1)').text());//push same
      name.push($(this).find(':nth-child(2)').text());
      age.push($(this).find(':nth-child(4)').text())
    }
  
  });
  console.log(name);
  console.log(id);
   console.log(age);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="geo">
  <thead>
    <tr>
      <th>id</th>
      <th>name</th>
      <th>geo</th>
      <th>age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>a</td>
      <td>ME</td>
      <td>20</td>
    </tr>
    <tr>
      <td>2</td>
      <td>b</td>
      <td>ME</td>
      <td>30</td>
    </tr>
    <tr>
      <td>3</td>
      <td>c</td>
      <td>ME</td>
      <td>42</td>
    </tr>
    <tr>
      <td>4</td>
      <td>d</td>
      <td>USA</td>
      <td>20</td>
    </tr>
    <tr>
      <td>5</td>
      <td>e</td>
      <td>UK</td>
      <td>22</td>
    </tr>
  </tbody>
  <tfoot>
  </tfoot>
</table>

Upvotes: 1

Related Questions