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

Question

我正在尝试从html文本输入表中检索数组的数组，但是当我查看数组的数组时，即使有很多默认文本，但它填充了空字符串，而我又填写了一些细胞。 这是被调用的javascript，其后是用于生成表格的php。 当我点击按钮时，我得到

” ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,”

<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

要将HTML表转换为2d数组，请迭代其行TableElement.rows 。 在迭代每行时，循环其单元格TableRowElement.cells并收集innerHTML每个textContent 。

以JavaScript ES6 功能形式，它看起来像：

 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> 

使用ol'school for循环和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/

如果您的HTML是这样的：

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

您可以在JQuery中使用.each() ：

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

如果您使用的是JQuery，请一直使用它。

Answer 3

我看到答案已经被接受，但是由于该问题被标记为“ jQuery”，因此可能有兴趣查看jQuery解决方案的紧凑程度：

$("#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

看来您使用的是jQuery，请尝试更改以下行

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

至

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