Read the first column values of a HTML table with jquery

Question

I got a table:

<table id="ItemsTable" >​
    <tbody>
   <tr>
     <th>
       Number
     </th>
     <th>
       Number2
     </th>
    </tr>
  <tr>
    <td>32174711</td>     <td>32174714</td>
  </tr>
  <tr>
    <td>32174712</td>     <td>32174713</td>
  </tr>
</tbody>
</table>

I need the values 32174711 and 32174712 and every other value of the column number into an array or list, i'm using jquery 1.8.2.

Answer 1

var arr = [];
$("#ItemsTable tr").each(function(){
    arr.push($(this).find("td:first").text()); //put elements into array
});

See this link for demo:

http://jsfiddle.net/CbCNQ/

Answer 2

You can use map method:

var arr = $('#ItemsTable tr').find('td:first').map(function(){
     return $(this).text()
}).get()

http://jsfiddle.net/QsaU2/

From jQuery map() documentation:

Description: Pass each element in the current matched set through a function, producing a new jQuery object containing the return values. . As the return value is a jQuery-wrapped array, it's very common to get() the returned object to work with a basic array.

Answer 3

// iterate over each row
$("#ItemsTable tbody tr").each(function(i) {
    // find the first td in the row
    var value = $(this).find("td:first").text();
    // display the value in console
    console.log(value);
});

http://jsfiddle.net/8aKuc/