ExcelやスプレッドシートのCSVコピペをTable形式のHTMLに変換する

Excelやスプレッドシートから範囲コピペしてボタンを押してください

インデントは半角スペースx2です 必要ならば適当にタブなどに置換してください

view source

JavaScript

$(function(){
  $('#go').on('click', function(){
    var csv = $('#input').val();
    var table = csv2table(csv)
    $('#output').val(table);
  });
});

function csv2table(csv){
  var table = '';
  var ary= [];
  var sp = '  ';
  var lines = csv.split("\n");
  ary.push('<table>');
  ary.push(sp+'<tbody>');
  lines.forEach(function(line, index){
    var row = line.split("\t");
    ary.push(sp+sp+'<tr>');
    row.forEach(function(v){
      var tds = '<td>';
      var tde = '</td>';
      if(index===0){
        tds = '<th>';
        tde = '</th>';
      }
      var vv = sp+sp+sp+tds+v+tde;
      ary.push(vv);
    });
    ary.push(sp+sp+'</tr>');
  });
  ary.push(sp+'</tbody>');
  ary.push('</table>');
  table = ary.join("\n");
  return table;
}

CSS

textarea{
  width:100%;
  height:240px;
  background-color:#eeeeee;
  border:1px solid #000000;
  box-sizing:border-box;
}
textarea.drag{
  background-color:#ee9999;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-csv-to-table-html/

ABOUT

hi0a.com 「ひまアプリ」は無料でつかえる便利ツールやブラウザ上で遊べるミニゲームを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。ご了承下さい。