0

HTMLファイルがあります。CSV データを含む書式設定済みのテキストが含まれています。

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

このデータを抽出し、Javascript を使用して HTML テーブルに変換するにはどうすればよいですか?

4

2 に答える 2

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の各要素をテーブルの行に追加してから、生成された各行をテーブルに追加することです。表はドキュメントの本文に追加されますが、好きな場所に追加できます。

そして、これも私のデモです。

于 2012-06-17T04:32:25.963 に答える
2

データが指定した正確な形式になることがわかっている場合は、次のような単純なものが機能します。

マークアップ:

<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;

デモ

于 2012-06-17T04:51:32.850 に答える