Question

我有这两个有效的JavaScript函数

https://github.com/cryptomanxxx/Random2DArrayPlusHtmlTable https://cryptomanxxx.github.io/Random2DArrayPlusHtmlTable/

1）生成一些随机数据2）为此类数据创建HTML表。有两个问题。

1）缺少HTML表格列标题（HTML表格中的第一行）。将带有列标题的行（应该是第一行）添加到HTML表的简单方法是什么？列标题行应这样表示：变量1，变量2，变量3等

2）HTML表中没有带有时间戳的列。带有时间戳的新列（第一列）也将很好，例如：time 1，time 2，time 3等

很明显，我没有设法理解代码的工作原理，因为如果这样做的话，修改代码很容易。复杂性是压倒性的。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="JavaS.js"></script>
    <meta charset="utf-8" />
    <style>
        table {
            border-collapse: collapse;
        }

        table,
        td,
        th {
            border: 1px solid black;
        }
    </style>
</head>

<body>

    <div id="div1">

</body>

<script>  htmlTable(RandomArray(8, 4));   </script>

</html>

function RandomArray(rows, cols) {
    var arr = [];

    for (var i = 0; i < rows; i++) {
        arr.push([]);
        arr[i].push(new Array(cols));

        for (var j = 0; j < cols; j++) {
            arr[i][j] = Math.random();
        }
    }
    console.log(arr);
    return arr;
}


function htmlTable(d) {
    var data = d;
    var html = '<table><thead><tr></tr></thead><tbody>';

    for (var i = 0, len = data.length; i < len; ++i) {
        html += '<tr>';
        for (var j = 0, rowLen = data[i].length; j < rowLen; ++j) {
            html += '<td>' + data[i][j] + '</td>';
        }
        html += "</tr>";
    }
    $(html).appendTo('#div1') ;
}

Answer 1

不用担心复杂性，玩的时间越长越容易。

1）如果您想要列标题，那就是th标签的用途……它们应该放在您已经拥有的thead标签内，如下所示：

var html = '<table><thead><tr><th>Timestamp</th><th>Variable 1</th><th>Variable 2</th><th>Variable 3</th><th>Variable 4</th></tr></thead><tbody>';

详细了解HTML表here。

2）如果要增加一列，请在添加随机值的循环之前添加一个值（ a td-表数据的缩写）

...
html += '<tr>';
html += '<td>' + new Date().getTime() + '</td>'    <------ NEW CODE TO ADD ANOTHER VALUE
for (var j = 0, rowLen = data[i].length; j < rowLen; ++j) {
...

您可以了解有关日期的更多信息，包括创建日期和显示日期here。

总而言之，您的功能将如下所示：

function htmlTable(d) {
    var data = d;
    var html = '<table><thead><tr><th>Timestamp</th><th>Variable 1</th><th>Variable 2</th><th>Variable 3</th><th>Variable 4</th></tr></thead><tbody>';

    for (var i = 0, len = data.length; i < len; ++i) {
        html += '<tr>';
        html += '<td>' + new Date().getTime() + '</td>'
        for (var j = 0, rowLen = data[i].length; j < rowLen; ++j) {
            html += '<td>' + data[i][j] + '</td>';
        }
        html += "</tr>";
    }
    $(html).appendTo('#div1') ;
}

使用jQuery

1 个答案: