在脚本中使用HTML表格标签

Question

使用此示例https://www.jqueryscript.net/table/jQuery-Plugin-To-Generate-A-Table-From-A-CSV-File-CSV-Parser.html

我设置了一个HTML表，该表从多个Raspberry PI（通过SSH）获取一个CSV文件，并将此CSV输出显示为HTML表：

2018-03-22 12:43:21,NM_Test.h264,-2

我的HTML页面运行以下脚本：

<!DOCTYPE html>
<body>
<div id="container"></div>

<script>
    $.get('ssh.php', function(data) {
        // start the table
        var html = '<table">';
        // split into lines
        var rows = data.split("\n");
        // parse lines
        rows.forEach( function getvalues(ourrow) {
            // start a table row
            html += "<tr>";
            // split line into columns
            var columns = ourrow.split(",");
            html += "<td>" + columns[0] + "</td>";
            html += "<td>" + columns[1] + "</td>";
            html += "<td>" + columns[2] + "</td>";
            // close row
            html += "</tr>";
        })
        // close table
        html += "</table>";
        // insert into div
        $('#container').append(html);
    });
</script>
</body>
</html>

我的SSH.php：

// set up SSH2 conenctions using config.php to connect to multiple PIs and execute:

echo $ssh->exec('tail -1 /var/log/playlog.csv');

config.php文件：

return [
[
    "name" : "test1",
    "ip" : "127.0.0.1",
    "port": 97,
    "key" : 'ssh-dss AAAAB3NzaC1kc3MAA...c3=',
]
[ ... ]
];

在我的HTML表中，如何添加列名，例如：

<tr>
    <th>PI Name</th>
    <th>Date/Time</th>
    <th>Playing</th>
    <th>Error</th>
</tr>

但是对于“ PI名称”列，如何返回在config.php文件中为每个PI定义的相应“名称”？

我在jQuery中使用HTML标签有困难。

Answer 1

最简单的方法是将PI名称添加为CSV文件每一行的第一个元素，因此在PHP代码中而不是JavaScript代码中。

CSV文件应如下所示：

test1,2018-03-22 12:43:21,NM_Test.h264,-2

调整CSV格式后，请进行以下JavaScript更改：

<script>
    $.get('ssh.php', function(data) {
        // start the table
        var html = '<table>';
        // add column headers
        html += '<tr><th>PI Name</th><th>Date/Time</th><th>Playing</th><th>Error</th></tr>';
        // split into lines
        var rows = data.split('\n');
        // parse lines
        rows.forEach( function getvalues(ourrow) {
            // start a table row
            html += "<tr>";
            // split line into columns
            var columns = ourrow.split(",");
            html += "<td>" + columns[0] + "</td>";
            html += "<td>" + columns[1] + "</td>";
            html += "<td>" + columns[2] + "</td>";
            html += "<td>" + columns[3] + "</td>";
            // close row
            html += "</tr>";
        })
        // close table
        html += "</table>";
        // insert into div
        $('#container').append(html);
    });
</script>

在脚本中使用HTML表格标签

问题描述

1 个解决方案

解决方案1
1 2018-04-05 09:40:41

在脚本中使用HTML表格标签

问题描述

1 个解决方案

解决方案1 1 2018-04-05 09:40:41

解决方案1
1 2018-04-05 09:40:41