How to iterate through an HTML table column and input the values into a Javascript array using JQuery

Question

Let's say I have a table column with 10 rows, each with <td id="num"> and a text value.

How can I use JQuery to loop through each row in the column and input the spins into a Javascript array?

I thought the following code would do it, but it is only getting the first element:

var numArray = [];
$("#num").each(function(n){
   numArray[n] = $(this).text();
});

Any ideas?

Thanks!

Answer 1

You can't have multiple elements with the same id. This isn't allowed because the id is used to identify individual elements in the DOM. I'd suggest giving them all the same class, which is allowed.

<td class="num">

Then this should work:

var numArray = [];
$(".num").each(function(n){
   numArray[n] = $(this).text();
});

Answer 2

Like mcos said, selecting by id for all the tables doesn't work. There can only be one item on a page with a given id.

You can either give your table an id and do the following:

var numArray = [];
// Assuming #my-table-id is your table and you want all the tds
$("#my-table-id td").each(function(n){
   numArray[n] = $(this).text();
});

Or if you don't want all the tds, use a class to identify the ones you want

var numArray = [];
// Assuming #my-table-id is your table and you added class="collect" 
// to the tds you want to collect
$("#my-table-id td.collect").each(function(n){
   numArray[n] = $(this).text();
});

Also stealing from others answers, the map function can also help you make your code even smaller

var numArray = $.map( $("#my-table-id td.collect"), function (td){
   return $(td).text();
})

Answer 3

it's advised that use don't reuse the ID but since it'll html.. it'll still work..

the jQuery ID(#) selector will only select the first match...

you can use the td[id^='num'] or td[id*='num'] or td[id$='num'] instead

use the map ..

var numArray = $("td[id^='num']").map(function(){
return $(this).text();
}).get();

This will select all the td's with ID's starting as num

See it here

Answer 4

You can achieve the this with using .text(function(i, text){})

var allText = [];
$("table td").text(function(i, t){
    allText.push(t);
});

Code example on jsfiddle

If you need to target a particular cell(s) you can just modify the selector.

$("table td#num").text(function(i, text){
    allText.push(text);
});

With that being said, an id should be unique per dom and if you can adjust the html using a class would be the right way.

 <td class="num">
   some text 1
 </td>

$("table td.num").text(function(i, text){
    allText.push(text);
});

Example