javascript 在html表中显示js数组

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7388486/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 23:57:14  来源:igfitidea点击:

show js array in html table

javascript

提问by Jon

I have a javascript array and I want to show parts of it in HTML.

我有一个 javascript 数组,我想用 HTML 显示它的一部分。

For example what html code would I use in the body to show a table of just the info from QR4 - the number and the country? There are other parts to the array so to show the whole QR4 array would be fine, but Id also like to know how to select specific parts

例如,我将在正文中使用什么 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";

I have this code making a table in php using csv which works fine but I want it client side, not server side. A table like this would be fine...

我有这段代码使用 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>";
?>

采纳答案by Jose Faeti

Here is a really simple example of how you could do it.

这是一个非常简单的示例,说明如何做到这一点。

Check this fiddle.

检查这个小提琴

You have to pass an array to the function displayArrayAsTable(). You can then specify the range of the array to insert into the table, for example from 24 to 25 like you asked, otherwise all the array will be processed.

您必须将数组传递给函数displayArrayAsTable()。然后,您可以指定要插入表中的数组范围,例如按照您的要求从 24 到 25,否则将处理所有数组。

The function will return a table element you can then append where you find more appropriate, or tweak the function so that will always insert it for you where you want.

该函数将返回一个表格元素,您可以将其附加到您认为更合适的位置,或调整该函数,以便始终将其插入到您想要的位置。

回答by kevindh89

To show all rows of the QR4 array in a HTML table use this:

要在 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>

To show specific elements from the Javascript array in a HTML table use this:

要在 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>

As I suspect you want to combine the QR[24] and QR[25] elements in one row, that's what I did in my second code sample. But if that's the situation, your array structure isn't very logical.

因为我怀疑您想将 QR[24] 和 QR[25] 元素组合在一行中,这就是我在第二个代码示例中所做的。但如果是这种情况,你的数组结构就不太合乎逻辑了。

I gave you the code samples to select data from Javascript arrays and put them in HTML tables, now it's on you to use it the way you need it.. Because that isn't clear to me at all..

我为您提供了代码示例,用于从 Javascript 数组中选择数据并将它们放入 HTML 表格中,现在您可以按照自己需要的方式使用它.. 因为这对我来说根本不清楚..

回答by Ed Manet

Assuming you already have the table defined, you can use some simple DOM methods to add and delete rows.

假设您已经定义了表,您可以使用一些简单的 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];
}