Extracting entire column of data from HTML table into array using jQuery

Question

Could not find a clear and recent explanation of how to achieve this. Does jQuery have a straightforward method for taking the entire third column from a HTML table with id="table1" and populating an array with one cell value per array element. I am relatively new to jQuery and have not explored its features fully. Some of jQuery's shortcuts have amazed me so thought it might be wiser to ask here than to go on mashing code together and seeing no results.

Answer 1

To build a array out of all elements from 3rd column you can using the following code

var colArray = $('#table1 td:nth-child(3)').map(function(){
       return $(this).text();
   }).get()​;

here What I am doing is selecting all cells in 3rd column by nth-child selector. Then using $.map function to loop through to and use their value to build a array.

Working Fiddle

Answer 2

You can try this :

var myArray = new Array();
$(document).ready(function() { 
    $("#table1 tr td:nth-child(3)").each(function(i){
       myArray.push($(this).text());
    });
});

Here is an example http://jsfiddle.net/nU6bg/