来自HTML输入表的数组的Javascript数组

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>";
?>

Answer 1

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> 

Answer 2

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.

Answer 3

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

Answer 4

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