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

【问题标题】：How to bring a dynamically generated HTML table into a JS array?如何将动态生成的 HTML 表格带入 JS 数组？
【发布时间】：2013-02-28 11:12:14
【问题描述】：

我正在从一个 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 数组的数组，即 [first name, last name] 对的数组。

【问题讨论】：

标签： php javascript html dom

【解决方案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 循环中，您将构建 [first name, last name] 对的列表。为此，您将获取当前行的两个 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_encoded数组中的<script>标签，就像@JayBhatt建议的那样。这可能是更快的方法，并且对用户浏览器的压力要小得多。

【讨论】：

谢谢，我想这回答了我的问题。我需要更好地探索 DOM...
我收到了type error - nameTable is null。我尝试将代码放在window.onload 中，以确保在加载之前我没有尝试获取引用，但这没有区别......
您是否将id="nameTable" 添加到您的<table> 标签中？另外，在您的getElementById 通话中，是否包含引号？
对不起，我应该注意到这段代码未经测试。因此像“类似这样的东西”这样的短语
快速跟进问题：使用 DOM 而不是简单地使用每个 <td> 的 id 并以这种方式获取值有什么优势（如果有的话）？

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：