最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin7浏览0评论

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!

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!

Share Improve this question asked Apr 6, 2011 at 17:57 PleaseHelpMePleaseHelpMe 7393 gold badges8 silver badges13 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 5

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();
});

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();
})

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

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

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论