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.

For what it's worth, the "push()" approach seems to be fastest: jsperf.com/html-table-to-array-map-vs-push — Jeromy French
– Jeromy French, Commented Feb 17, 2016 at 0:35

Prasenjit Kumar Nag · Accepted Answer · 2012-05-21 10:39:17Z

12

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

answered May 21, 2012 at 10:39

Prasenjit Kumar Nag

13.5k3 gold badges47 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

derek8 Over a year ago

Thanks for this. Is there any easy way to display the values in an alert or even document.write? Thank you.

Prasenjit Kumar Nag Over a year ago

Click on the link I have provided at the bottom of my answer and you will get an alert.

Prasenjit Kumar Nag Over a year ago

Or even better check this link, jsfiddle.net/joycse06/tmfxr/1 It shows an alert and adds the values into an div too. :)

derek8 Over a year ago

Thank you Joy. This achieves what I needed.

Mohammad Masoudian · Accepted Answer · 2013-12-06 21:40:24Z

4

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/

edited Dec 6, 2013 at 21:40

Mohammad Masoudian

3,5017 gold badges29 silver badges45 bronze badges

answered May 21, 2012 at 10:32

Hüseyin BABAL

15.6k5 gold badges53 silver badges74 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related