HTMLファイルがあります。CSV データを含む書式設定済みのテキストが含まれています。
<pre>1,2,3,4
5,6,7,8
9,0,1,2
3,4,5,6
</pre>
このデータを抽出し、Javascript を使用して HTML テーブルに変換するにはどうすればよいですか?
HTMLファイルがあります。CSV データを含む書式設定済みのテキストが含まれています。
<pre>1,2,3,4
5,6,7,8
9,0,1,2
3,4,5,6
</pre>
このデータを抽出し、Javascript を使用して HTML テーブルに変換するにはどうすればよいですか?
この回答で説明されている機能を使用してください。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
の各要素をテーブルの行に追加してから、生成された各行をテーブルに追加することです。表はドキュメントの本文に追加されますが、好きな場所に追加できます。
そして、これも私のデモです。
データが指定した正確な形式になることがわかっている場合は、次のような単純なものが機能します。
マークアップ:
<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;