javascript - 如何将 CSV 数据转换为使用 Javascript 进入 HTML 表？

Question

我有一个 HTML 文件。它具有预先格式化的文本，其中包含 CSV 数据。

<pre>1,2,3,4
5,6,7,8
9,0,1,2
3,4,5,6
</pre>

如何提取这些数据并使用 Javascript 将其转换为 HTML 表格？

Answer 1

如果您知道数据将采用您提供的确切格式，那么像这样简单的事情就可以了：

标记：

<pre id="data">1,2,3,4
5,6,7,8
9,0,1,2
3,4,5,6</pre>
<div id="table"></div>

JavaScript：

var table = '';
var rows = new Array();

rows = document.getElementById('data').innerHTML.split('\n');
table += '<table>'

for(var i = 0; i < rows.length; i++) {
    var columns = rows[i].split(',');
    table += '<tr>';

    for(var j = 0; j < columns.length; j++) {
        table += '<td>' + columns[j] + '</td>';
    }

    table += '</tr>';
}

table += '</table>';
document.getElementById('table').innerHTML = table;

演示

Answer 2

使用此答案中描述的功能。如果你给它 CSV 数据，它会返回一个数组。所以给定数据：

<pre id="CSV_DATA">1,2,3,4
5,6,7,8
9,0,1,2
3,4,5,6
</pre>

您可以将 CSV 转换为 Javascript 字符串：

var csv_data = document.getElementById("CSV_DATA").innerHTML;

然后使用该函数CSVToArray获取数据数组：

var array_data = CSVToArray(csv_data, ",");

然后制作一个 HTML 表格：

var table=document.createElement('table');
table.border='1';
document.body.appendChild(table);
for(var i=0; i<array_data.length; i++){
    var line = array_data[i];
    var tr=document.createElement('tr');
    for(var j=0; j<line.length; j++){
        var td=document.createElement('td');
        td.innerHTML = line[j];
        tr.appendChild(td);
        table.appendChild(tr);
    }
}

我没有测试过这段代码。请查看并制定详细信息。但它应该做的是遍历由返回的数组并将该数组的CSVToArray每个元素添加到表行，然后将每个生成的行添加到表中。该表格已添加到文档的正文中，但您可以随意添加它。

这也是我的一个演示。