Question

我正在从php数组生成一个2列HTML表，如下所示：

<table>
  <?php
    $i=0
    foreach ($fullNameArray as $namePair){
      echo
        "<tr>
          <td id='first ".$i."'>".$namePair[0]."</td>
          <td id='last".$i."'>".$namePair[1]."</td>
        </tr>";
      $i++;
    }
  ?>
</table>

在Javascript中探索此表的最佳方法是什么，例如构建一个可以复制PHP数组的数组，即[名字，姓氏]对的数组。

Answer 1

使用PHP的json_encode将数组编码到Json，将此字符串分配给javascript变量并使用javascript将json解码为数组...

Answer 2

另一种方法是将json分配给隐藏的输入而不是javascript，然后在javascript代码中获取输入值。

Answer 3

如果你想采用传统的纯JavaScript方法，你可以做一些简单的DOM遍历。

如果您在表格中添加id，您的生活将变得更加轻松，尤其是如果您在页面中有（或可能稍后添加）其他表格。

<table id="nameTable">
    ...
</table>

现在，您可以在JavaScript中访问该表，并在变量中存储对它的引用。您还需要初始化一个空数组/列表变量以便稍后保存名称。

var nameTable = document.getElementById("nameTable");
var nameArray = [];

接下来，您开始循环遍历表的子元素，每个元素都是tr（表格行）元素。

for (var i=0; i<nameTable.childNodes.length; i++) {
    ...
}

在for循环中，您将构建[名字，姓氏]对的列表。您将通过获取当前行的两个td（表数据单元格）子项中的每一个的值来执行此操作。

    var dataCells = nameTable.childNodes[i].childNodes;
    var namePair = [dataCells[0].innerHTML, dataCells[1].innerHTML];

那应该给你一个像这样的JSON数组（添加我的值）：

[
    ["Andy", "Jackson"],
    ["Barry", "Obama"],
    ["Benny", "Franklin"],
    ["Georgey", "Washington"],
    ["Billy", "Clinton"]
]

要查看，完整代码将如下所示：

var nameTable = document.getElementById("nameTable");
var nameArray = [];

for (var i=0; i<nameTable.childNodes.length; i++) {
    var dataCells = nameTable.childNodes[i].childNodes;
    var namePair = [dataCells[0].innerHTML, dataCells[1].innerHTML];
}

注意：这很有趣，但如果您不介意源代码中的硬编码JSON数组（如果您有表格，那么可能是更好的解决方案）无论如何它真的没关系），可能是直接从PHP打印json_encode标签中的<script> d数组，就像@JayBhatt建议的那样。它可能是更快的方法，它可以减轻用户浏览器的压力。

如何将动态生成的HTML表格引入JS数组？

3 个答案: