Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite
3

I would like to ask is it possible to convert an HTML TABLE into Array in javascript? Thank you. I have this table. i haven't tried anything yet.

update

<table id="cartGrid">
  <thead>
       <tr>
          <th>Item Description</th>
          <th>Qty</th>
          <th>Unit Price</th>
          <th>Ext Price</th>
       </tr>
  </thead>
<tbody>
    <tr><td>Old Lamp</td><td>1</td><td>107.00</td><td>107.00</td>
    <tr><td>Blue POst</td><td>2</td><td>7.00</td><td>14.00</td>
</tbody>
</table>
share|improve this question
 
yes. okay, now show us some code, what you have tried or what the table looks like. –  f0x Mar 6 '12 at 7:47
 
An array of what? The elements comprising the table, the values inside the cells? –  kinakuta Mar 6 '12 at 7:47
 
Yes, by writing a code for it :) (which will loops thru its rows & columns!) –  linuxeasy Mar 6 '12 at 7:47
2  
Sure it is. Where exactly do you have problems in implementing this? Just read the table row by row and cell by cell and add the contents to an array. –  Sirko Mar 6 '12 at 7:48
 
can you show me some codes? i have the table posted on top. –  Dreyfus15 Mar 6 '12 at 7:53
show 2 more comments

1 Answer

up vote 7 down vote accepted

Here's one example of doing what you want.

var myTableArray = [];

$("table#cartGrid tr").each(function() {
    var arrayOfThisRow = [];
    var tableData = $(this).find('td');
    if (tableData.length > 0) {
        tableData.each(function() { arrayOfThisRow.push($(this).text()); });
        myTableArray.push(arrayOfThisRow);
    }
});

alert(myTableArray);

You could probably expand on this, say, using the text of the TH to instead create a key-value pair for each TD.

Since this implementation uses a multidimensional array, you can access a row and a td by doing something like this:

myTableArray[1][3] // Fourth td of the second tablerow

Edit: Here's a fiddle for your example: http://jsfiddle.net/PKB9j/1/

share|improve this answer
1  
You will want to be more specific with your selector than "table tr", especially if you are using tables for layout anywhere, as this will find all of the tr's (possibly inside other, nested tables) which are inside a table. Given the updated HTML, the selector would be $('#cartGrid'). –  GregL Mar 6 '12 at 7:58
 
Naturally. It's just an example. I'll update it for clarity. –  Andreas Carlbom Mar 6 '12 at 7:59
 
Yeah, I know that. But it seems like the OP wasn't too confident with JS and jQuery, which is fine, but I wanted to point it out in case they just copy-pasted your code and got totally unexpected results if they happened to be using nested tables for layout. –  GregL Mar 6 '12 at 8:12
 
If i want to add fields on my array as i convert the table. how can i do that? –  Dreyfus15 Mar 6 '12 at 8:13
 
Just use the <arrayName>.push(<object>);-syntax to add things to the array. Example: arrayOfThisRow.push("This value was added manually!"); –  Andreas Carlbom Mar 6 '12 at 11:58

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.