10FileAPIを使って、CSVファイルからテーブルを作成する方法HTMLJavaScriptFileAPIはじめに初めまして、初投稿です。読みづらい箇所もあると思いますが、よろしくお願いします。エクセルなどで作成した表データをそのままテーブルにできないかと色々模索した際に作成したコードです。「エクセルをそのままテーブルにしたい!」という私みたいなモノグサさんのお役に立てれば幸いです。以下の手順でコードを作成していきます。【HTML】FileAPIを使ってCSVファイルを読み込むまず最初に、FileAPIを使ってCSVファイルを読み込みます。することで、CSVファイルだけが選択できるようにします。【HTML】テーブルを書き出す場所を作成するテーブルを書き出したい場所に、次のコードを入れます。テーブルが出力されます。オブジェクト(CSV)の中身を読み込みます。読み込んだCSVを配列化して取得します。テーブルにした時の、1列の要素数を取得しておきます。sakusaku_table.js//1行ごとに配列化します。//全ての配列を個別に取得します。【Javascript】CSVの各データを配列として読み込む-2配列データを中身の要素数(エクセルの列数)で均等に分割します。【Javascript】テーブルに書き出す処理ここでついに、取り込んだCSVファイルのデータをテーブルに書き出します。この時点では、ヘッダー行のみ背景色と文字色を変更しておきます。今後、CSSで見た目を修正する時のために各セルにIdとclassを追加する準備をします。id="userCsvTable">というidを付与します。//(ここでは0ゼロしか入らない・次のステップで正しい連番に置き換えます。//各セルのclassを追加。//各セルのclassを追加。【Javascript】作成したテーブルの<tr>にidを付与するCSSで見た目を修正するために各セルに正式なidを付与して完成です。最後にここまでお付き合いいただきありがとうございます。シンプルな書き方とかあると思いますのでアドバイスなどいただけると嬉しいです。動作サンプルはこちらからご確認いただけます。requestStockLike3@medo0316130人よし!酒よし!温泉よし!でおなじみ、おんせん県「大分」から、誰かのお役に立てる(きっと!)な情報をお送りします。upLoginユーザーは見つかりませんでした。