时间戳

首页 > 解决方案 > 如何使用数组将带有 id 的 PHP 表值链接到 javascript？

javascript - 如何使用数组将带有 id 的 PHP 表值链接到 javascript？

问题描述

让我解释一下我的问题/任务：

1) 我有一个 PHP 表，显示某个日期和时间的温度，以及来自天气预报的 API。2）工作是：用Javascript把这张表翻译成折线图。3) 我需要在 PHP 表和我的 Javascript 代码之间创建一个链接。但是我如何使用“数组”来做到这一点？4）我当前的方法：为 PHP 表中的每个 td 行使用一个 id 标记。接下来，创建一个 for 循环，检查 PHP 表 40 次（图表需要的数据点数），以收集下一个 td 行（不幸的是，我得到了相同值的 40 倍）。

简而言之，我如何使用表格数据并使其在 Javascript 中“可用”来创建折线图，作为温度的可视化表示。

在这里，您可以找到我当前使用 PHP 和 Javascript 编写的代码。非常欢迎任何反馈、帮助或建议！先谢谢你！

PHP部分for循环：

echo "<table>";

for ($j=0; $j < 40 ; $j++) { 

    echo "<tr>";
    echo "<td id=Temp>{$data->list[$j]->main->temp}</td>";
    echo "<td id=Datum>{$data->list[$j]->dt_txt}</td";
    echo "</tr>";
}

echo "</table>";

Javascript：

var temp = new Array();
var datum = new Array();

for (var i=0; i < 40 ; i++) { 

   temp[i] = document.getElementById("Temp").innerText;
   datum[i] = document.getElementById("Datum").innerText;

}

格雷茨，C.

标签： javascriptphparrayslinegraph

解决方案

ID 必须是唯一的，你不能在每一行都有相同的id=Temp和。id=Datum你应该使用一个类。然后您可以使用该类遍历所有元素。

PHP：

echo "<table>";

for ($j=0; $j < 40 ; $j++) { 

    echo "<tr>";
    echo "<td class="Temp">{$data->list[$j]->main->temp}</td>";
    echo "<td class="Datum">{$data->list[$j]->dt_txt}</td";
    echo "</tr>";
}

echo "</table>";

JS：

var temp = Array.from(document.querySelectorAll(".Temp")).map(el => el.innerText);
var datum = Array.from(document.querySelectorAll(".Datum")).map(el => el.innerText);

推荐阅读