php - 如何将动态生成的 HTML 表放入 JS 数组中？

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

如果您想采用老式的纯 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 数组(如果您在那里有表格)，那么这可能是更好的解决方案无论如何，这真的不重要)，可能是打印 json_encode <script> 中的 d 数组直接从 PHP 标记，就像 @JayBhatt 建议的那样。这可能是更快的方法，并且对用户浏览器造成的压力要小得多。