Javascript array of arrays from html input table

Question

I am trying to retrieve an array of arrays from a html text input table, but when I look at the array of arrays I get back, its filled with empty strings even though there should be lots of default text and I filled in some more of the cells. Here is the javascript that is called followed by the php used to generate the table. When I click the button, I get

",,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,"

<script type="text/javascript">
    $(document).ready(function(){
    $("#testButton2").click(function(){
        var tableInfo=document.getElementById("myTable");

        console.log(tableInfo);

        var tableArray= [];
        for (var i = 1; i < tableInfo.rows.length; i++) {
            //var row = tableInfo.rows[i];
            var rowArray = [];
            for (var j = 0; j < tableInfo.rows[i].length; j++) {
                rowArray.push(tableInfo.rows[i].cells[j].innerHtml);
            }
            tableArray.push(rowArray);
        }
        alert(tableArray.toString());
    }); 
});
</script>

<?php
$table = "info.csv";
$id = "myTable";
$count = 0;
echo "<table id=".$id.">\n\n"; 
$f = fopen($table, "r"); 
while (($line = fgetcsv($f)) !== false) {
    echo "<tr>";
    foreach ($line as $cell) {
        if ($count != 0) {
            echo "<td><input value=" . htmlspecialchars($cell) . "></input></td>";
                    } else {
                        echo "<td>" . htmlspecialchars($cell) . "</td>";
                    }    
                }
            echo "</tr>\n";
            $count += 1;
        }
        fclose($f); echo "\n</table>";
?>

Have you tried file_get_content() versus fopen()? Can you echo just $table and see the read results? — Twisty
– Twisty, Commented Aug 11, 2015 at 17:38
In JS there's .innerHtml which doesn't exist, use .innerHTML instead. — Teemu
– Teemu, Commented Aug 11, 2015 at 17:39
Oh sorry, your question is in regards to the JavaScript and not the PHP code right? — Twisty
– Twisty, Commented Aug 11, 2015 at 17:39
Yeah the reading off of the csv is working fine. No worries :) — aaadawg
– aaadawg, Commented Aug 11, 2015 at 17:41
@Teemu I tried both innerHtml and innerHTML but neither of them worked — aaadawg
– aaadawg, Commented Aug 11, 2015 at 17:42

Roko C. Buljan · Accepted Answer · 2019-01-08 06:20:59Z

To convert a HTML table to 2d Array iterate its rows TableElement.rows. While iterating over each row loop its cells TableRowElement.cells and collect each textContent of innerHTML.

In a JavaScript ES6 functional fashion it would look like:

const tableToArray = tableId => [...document.querySelector(tableId).rows].map(row => 
  [...row.cells].map(cell => cell.textContent)
);


jQuery( $ => {

  $("#testBtn").on({
    click () {
      const tableArray = tableToArray("#myTable");
      console.log(tableArray);
    }
  });

});

<button id="testBtn">test</button>
<table id="myTable">
  <tr><td>a1</td><td>a2</td><td>a3</td></tr>
  <tr><td>b1</td><td>b2</td><td>b3</td></tr>
  <tr><td>c1</td><td>c2</td><td>c3</td></tr>
  <tr><td>d1</td><td>d2</td><td>d3</td></tr>
</table>
<script src="//code.jquery.com/jquery-3.3.1.js"></script>

Using ol'school for loops and Array.push():

jQuery(function($){
  
    $("#testBtn").click(function() {
        var table = document.getElementById("myTable");
        var arrTable = [];
        
        for (var i = 0; i < table.rows.length; i++) {
            var row = table.rows[i];
            var arrRow = [];
            for(var j = 0; j < row.cells.length; j++) {
                arrRow.push(row.cells[j].textContent);
            }
            arrTable.push(arrRow);
        }
        
        console.log(arrTable);
    }); 
  
});

<button id="testBtn">test</button>
<table id="myTable">
  <tr><td>a1</td><td>a2</td><td>a3</td></tr>
  <tr><td>b1</td><td>b2</td><td>b3</td></tr>
  <tr><td>c1</td><td>c2</td><td>c3</td></tr>
  <tr><td>d1</td><td>d2</td><td>d3</td></tr>
</table>
<script src="//code.jquery.com/jquery-3.3.1.js"></script>

Twisty · Accepted Answer · 2015-08-11 18:13:44Z

0

jsFiddle: http://jsfiddle.net/Twisty/vdsz2gpL/

If your HTML is like so:

<a href="#" id="testButton2">Run</a>
<br />
<br />
<table id="myTable">
    <tr>
        <td>Cell 1</td>
    </tr>
    <tr>
        <td>Cell 2</td>
    </tr>
    <tr>
        <td>Cell 3</td>
    </tr>
</table>

You can make use of .each() in JQuery:

$(document).ready(function () {
    $("#testButton2").click(function () {
        var tableArray = [];
        var tableInfo = $("#myTable");
        $("#myTable tr").each(function (i, row) {
            $(this).find("td").each(function(i, cell){
                tableArray.push($(cell).text());
            });
        });
        alert(tableArray.toString());
    });
});

If you're using JQuery, use it all the way through.

edited Aug 11, 2015 at 18:13

answered Aug 11, 2015 at 17:42

Twisty

31k2 gold badges30 silver badges50 bronze badges

4 Comments

Teemu Over a year ago

Do jQuery objects have rows collection which has cells collection?

Twisty Over a year ago

They are DOM Objects: w3schools.com/jsref/coll_table_rows.asp & w3schools.com/jsref/coll_table_cells.asp

Teemu Over a year ago

No, they are not, tableInfo is a jQuery object, it has not those collections. Though this is not relevant anymore, since you've edited the answer (btw. not my down vote)

Twisty Over a year ago

My previous answer was too quick. Whomever downvoted me was correct in doing so at that time. Good point in regards to the objects.

Roamer-1888 · Accepted Answer · 2015-08-11 19:30:41Z

0

I see that an answer has been accepted already but as the question is tagged "jQuery", it may be of interest to see how compact a jQuery solution would be :

$("#testButton2").click(function() {
    var tableArray = $("#myTable tr").map(function(tr) {
        return $("td", tr).map(function(td) {
            return $(td).text();
        }).get();
    }).get();
    console.log(tableArray);
});

answered Aug 11, 2015 at 19:30

Roamer-1888

19.3k5 gold badges35 silver badges45 bronze badges

Comments

user3574939 · Accepted Answer · 2015-08-11 17:39:24Z

-1

It looks like you're using jQuery, try changing the following line

rowArray.push(tableInfo.rows[i].cells[j].innerHtml

to

rowArray.push(tableInfo.rows[i].cells[j].html();

answered Aug 11, 2015 at 17:39

user3574939

8294 gold badges19 silver badges37 bronze badges

2 Comments

Teemu Over a year ago

tableInfo.rows[i].cells[j] is a HTMLTDElement, it doesn't have html() method.

aaadawg Over a year ago

I changed the line to rowArray.push(tableInfo.rows[i].cells[j].html()); but the output is still the same :(

Collectives™ on Stack Overflow

Javascript array of arrays from html input table

4 Answers 4

Comments

4 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related