CODEWITHSUNDEEP
javascriptjqueryhtmlarrayshtml-table
n0minal
n0minal

Reputation: 3223

Convert html table to array in javascript

How can an HTML table be converted into a JavaScript array?

<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>

Upvotes: 24

Views: 78450

Answers (5)

Saghachi
Saghachi

Reputation: 945

one easy and fast way is to map table like this:

var table = Array.prototype.map.call(document.querySelectorAll('#filter_table tr'), function(tr){
    return Array.prototype.map.call(tr.querySelectorAll('td'), function(td){
        return td.innerHTML;
    });
});

Upvotes: 0

Muhammad Hanif Shahzad
Muhammad Hanif Shahzad

Reputation: 65

You can write also with key value pair. this is so simple.

function htmlTableDataToArrayOfObject(){

    var arrayOfThisRow = [];
            $("#cartGrid tbody tr").each(function() {
                
                debugger;
                var description = $(this).find('td:eq(0)').text();
                var qty = $(this).find('td:eq(1)').text();
                var unitPrice= $(this).find('td:eq(2)').text();
    
                arrayOfThisRow.push({
                         desc: description,
                         quantity: qty,
                         price: unitPrice
                    });
            });
}

Upvotes: 2

cuddlemeister
cuddlemeister

Reputation: 1785

Here's typescript solution:


function getTableContent(table: HTMLTableElement): string[][] {
    return Array.from(table.rows).reduce((acc, row) => {
        const columns = Array.from(row.children)
            .map(column => column.textContent || '')

        return acc.concat(columns);
    }, [] as string[][])
}

Upvotes: 0

Youcef Ali
Youcef Ali

Reputation: 309

This a function coverts an Html Table (just give the id) and it returns an array of the table :

            function table_to_array(table_id) {
                    myData = document.getElementById(table_id).rows
                    //console.log(myData)
                    my_liste = []
                    for (var i = 0; i < myData.length; i++) {
                            el = myData[i].children
                            my_el = []
                            for (var j = 0; j < el.length; j++) {
                                    my_el.push(el[j].innerText);
                            }
                            my_liste.push(my_el)

                    }
                    return my_liste
            }

I hope it helps you !

Upvotes: 6

Andreas Eriksson
Andreas Eriksson

Reputation: 9027

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/

Upvotes: 57

Related Questions