Convert HTML table to array

Question

I have a html table

<table>
<tr>
<th>Type</th>
<th>Text</th>
<th>Time</th>
<th>Notification Time</th>
</tr>
<tr>
<td>Lab1</td>
<td>Some Text</td>
<td>Day of Week</td>
<td>Monday, Wednessday</td>
</tr>
<tr>
<td>Lab2</td>
<td>Some Text</td>
<td>Day of Week</td>
<td>Tuesday, Wednessday</td>
</tr>
</table>

Now I want to use those values of <td> and form an array in php or jquery. Any idea how to do it in the most simplest way?

jquery or php? 2 completely different things... what do you want to do with the array — andy mccullough, Aug 07 '15 at 09:56
also: how do you create that table? Is it coming from a php script or a jquery one or... — Lelio Faieta, Aug 07 '15 at 09:57
I am using PHP and need those values to save into database. I've populated that table using php and jquery. — Arnab, Aug 07 '15 at 10:06
Show please how you`ve populated it. It would be more easier to work with initial data i guess. — Alexandr Lazarev, Aug 07 '15 at 10:13
@ArnabHore, please check my high performance jQuery solution — Allan Chua, Aug 07 '15 at 10:13

Alexandr Lazarev · Accepted Answer · 2015-08-07T10:14:14.587

2

In jquery:

var tdCollection = $("table").find("td");
var array = [];
$.each(tdCollection, function(key, el){    
     array.push($(el).text());     
});
console.log(array);

fiddle: http://jsfiddle.net/qqdwct7h/

But it would be better to set an id attribute for the table, beacuse using $(table) isn`t best way to select a certain table.

edited Aug 07 '15 at 10:14

answered Aug 07 '15 at 10:03

Alexandr Lazarev

12,554
4
38
47

1

Save the jsfiddle and then copy the url – Meneer Venus Aug 07 '15 at 10:12
The use of $.each is extremely slower compared to a reversed loop. Please check jsperf.com ;) double usage of var in a method is also considered as a code smell. – Allan Chua Aug 07 '15 at 10:12
1

"Double usag of var" depends on code style. – Alexandr Lazarev Aug 07 '15 at 10:15
@LazarevAlexandr, well that coding style makes the JavaScript file heavier. Congrats :) – Allan Chua Aug 07 '15 at 10:16
2

Ok. The weight of a js file matters when it gets to production. When getting there, js file should pass different "uglify" processes to make code less "heavier", and such things are concerned there. Meanwhile when a js file is in development environment codestyle is more important than it`s weight. – Alexandr Lazarev Aug 07 '15 at 10:22
@LazarevAlexandr OK, nice style btw :) – Allan Chua Aug 07 '15 at 10:29

Allan Chua · Answer 2 · 2015-08-07T10:07:40.310

Check this jQuery traversing and Ajax sample :)

<script type="text/javascript">
    var tableRows = $("table tr"),
        currentRow,
        tableData = [];

    for (var i = tableRows.length; i--;) {
        currentRow = $(tableRows[i]);

        tableData.push({
            field1: $(":nth-child(1)", currentRow),
            field2: $(":nth-child(2)", currentRow),
            field3: $(":nth-child(3)", currentRow),
            field4: $(":nth-child(4)", currentRow)
        });
    }

    //Sample Test to verify if data is fetched
    console.log(tableData);

    $.ajax({
        url: "sample-ajax-handler.php",
        type: "POST",
        data: tableData,
        success: function (e) {
            //do what you want here :)
        }
    });
</script>

"field1" index is repeated. – Alexandr Lazarev Aug 07 '15 at 10:07 — Alexandr Lazarev, Aug 07 '15 at 10:07

Sven van de Scheur · Answer 3 · 2015-08-07T10:35:19.347

0

I wrote a fiddle that allows to generate an array based on the column:

http://jsfiddle.net/5vfm6k6q/2/

Works like this:

var parser = new ArrayParser(),
    result = parser.getArray('#table', 'Type');  // table selector, column

edited Aug 07 '15 at 10:35

answered Aug 07 '15 at 10:25

Sven van de Scheur

1,809
2
15
31

Convert HTML table to array

3 Answers3