在HTML表格中显示JS数组

Question

在HTML表格中显示JS数组

3

我有一个JavaScript数组，想在HTML中显示其中的部分内容。

例如：在body中使用什么HTML代码可以只显示QR4数组的信息 - 数量和国家？数组还有其他部分，所以展示整个QR4数组也可以，但我也想知道如何选择特定的部分。

QR4[25]  = "China";
QR4[24]  = "39241000";

QR8[25]  = "China";
QR8[24]  = "39241000";

QR8L[25] = "China";
QR8L[24] = "39241000";

QR4L[25] = "China";
QR4L[24] = "39241000";

我有这段使用CSV来制作PHP表格的代码，它可以正常工作，但我希望它在客户端而不是服务器端。一个像这样的表格就很好了...

<?php
echo "<table>\n\n";
$f = fopen("csv.csv", "r");
while (!feof($f) )  {
    echo "<tr>";
    $line_of_text = fgetcsv($f);
            echo "<td>" .  $line_of_text[10] . "</td>";

    echo "<tr>\n";
}
fclose($f);
echo "\n</table>";
?>

- Jon

3

注意，这个例子中有几个数组，不只是一个。从我的理解来看，您想显示QR4数组的所有元素？ - Edgar

你想让表格看起来怎么样？你能手动输入一个样本吗？ - Pointy

1

数组：你做错了。变量名：你做错了。修正这两个问题，然后再来玩吧。 - Incognito

我从csv文件中创建了一个数组。如何最好地在客户端显示它？我并不固执于使用数组或变量名称，但这似乎是建议的方法... - Jon

3个回答

1

这里有一个非常简单的示例，展示如何实现它。

请查看这个fiddle。

您需要将数组传递给函数displayArrayAsTable()。然后，您可以指定要插入到表格中的数组范围，例如从24到25，就像您所要求的那样，否则所有数组都将被处理。

该函数将返回一个表元素，您可以在更合适的位置附加它，或者调整函数以使其始终在您想要的位置插入它。

- Jose Faeti

这将为您提供一个仅包含数组数据的字符串行，而不创建任何元素。查看此处。 - Jose Faeti

我有一个带标题的垂直表格。我想使用数组插入数据。我猜最好的方法是将td添加到原始表中。但是，只创建一个新表可能更容易。我认为我可以在代码中看到表标记来自哪里，因此我认为我可以将其拿出或放入。但是，我对tr没有太多的运气...谢谢。 - Jon

如果你已经有了一个表，那么最好的做法是使用数组数据创建一个新行，就像这个例子中所示。 - Jose Faeti

太好了！我该如何向这样的表格追加内容呢？<table id="mytable"> <tr> <td>Number</td> </tr> <tr> <td>Country</td> </tr> </table> - Jon

在这个例子中，表格的一行上有编号和国家，都在同一个<tr>标签内。我试图让“Country”和“China”在同一个<tr>标签内，而不是在另一个<tr>标签内。<tr> <td>Country</td> <td>China</td> </tr> - Jon

显示剩余2条评论

0

假设您已经定义了表格，您可以使用一些简单的DOM方法来添加和删除行。

var table = document.getElementById("mytable");
for(i=0; i < QR4.length;i++) {
  var row = table.insertRow(table.rows.length);
  var cell = row.insertCell(0);
  cell.innerHTML = QR4[i];
}

- Ed Manet

当我运行此代码时，我会得到数字24和25作为表格底部的新<tr>。如何输出数据而不是数组编号，并且我更希望将数据作为表格的第二列而不是第二行显示 - 这样数据就是垂直的了。我想当时没有意识到这一点，因此没有在问题中提出。 - Jon

有没有一种方法可以将其集成为向现有表添加列的方式。我正在使用这段代码，但它会添加空列。i; for (i = 0; i < tbl.rows.length; i++) { createCell(tbl.rows[i].insertCell(tbl.rows[i].cells.length), i, 'col'); - Jon

var cell = row.insertCell(columnNumber); 所以对于第一列，它是insertCell(0)，第二列是insertCell(1)，第三列是insertCell(2)，以此类推。 - Ed Manet

这真的很好。但是它再次将数组作为自己的行添加，因此它与固定数据水平工作。我希望将数组的每个条目添加到与标题相同的行中，以便表格垂直显示。当我尝试修改代码时，无法使其正常工作。我更新了fiddle... HTML将以“行1行2行3”开头，而不是“列1列2列3”... - Jon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kevindh89 · Accepted Answer

要在HTML表格中显示QR4数组的所有行，请使用以下代码：

<table>
    <tr>
        <th>ID</th>
        <th>City</th>
    </tr>

    <script type="text/javascript">
    for(id in QR4)
    {
        document.write('<tr><td>' + id + '</td><td>' + QR4[id] + '</td></tr>');
    }
    </script>
</table>

要在HTML表格中显示Javascript数组中的特定元素，请使用以下代码：

<table>
    <tr>
        <th>Number</th>
        <th>City</th>
    </tr>

    <script type="text/javascript">
        document.write('<tr><td>' + QR4[24] + '</td><td>' + QR4[25] + '</td></tr>');
    </script>
</table>

我猜你想把QR[24]和QR[25]元素合并到一行中，这就是我在第二个代码示例中所做的。但如果是这种情况，你的数组结构并不是很合理。

我给了你从Javascript数组中选择数据并将其放入HTML表格的代码示例，现在你可以按照自己的需求使用它。因为我并不清楚你的具体需求。