非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

Googleスプレッドシートで選択セルをHTML Tableに生成するスクリプト

   

ブログに表を簡単に作成したいと思い、Googleスプレッドシートで下記のように選択したセルのところをHTML Tableに起こすスクリプトを作りました。

 

動画にもしました。サイドバー内にHTML Tableタグが現れるのでそれをコピペすればOKです。

 

↓こちらが生成したタグをコピペしたものです。スタイルシートは全く使っていないのでWordPressの場合スタイルは使っているテーマに依存します。

B3 C3 D3
B4 C4 D4
B5 C5 D5
B6 C6 D6
B7 C7 D7

 

ソースコード

index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h2>Table HTML</h2>
    <textarea id="text" style="font-size:10pt;width:100%;height:400px;"></textarea>
  </body>
  <script>
    window.onload = function() {  
      google.script.run
        .withFailureHandler(onFailure)
        .withSuccessHandler(onSuccess)
        .getText();
    }

    function onSuccess(result) {
      document.getElementById("text").value = result;
    }

    function onFailure(e) {
      document.getElementById("text").value = "Error";
    }
  </script>
</html>
 

 

コード.gs
function showSideBar() {
  var ui = SpreadsheetApp.getUi();
  var htmlOutput = HtmlService.createHtmlOutputFromFile('index')
                   .setTitle("Table");
  ui.showSidebar(htmlOutput);
}

function getText() {
  var mySheet = SpreadsheetApp.getActiveSheet();
  var range = mySheet.getActiveRange();
  var data = range.getValues();
  var table = '<table>\n<thead>\n';

  for(var i=0; i<data.length; i++){
    table += "<tr>\n";
    for(var j=0; j<data[i].length; j++){
      if(i==0){
        table += "<th>" +data[i][j]+ "</th>\n";
      }else{
        table += "<td>" +data[i][j]+ "</td>\n";
      }
    }
    table += "</tr>\n";
    if(i==0) table += "</thead>\n<tbody>\n";
  }
  table += "</tbody></table>";

  return table;
}
 

 

ガジェット系ブログもよろしく

すまたすログ

ガジェット系ブログです。主にChromebookの情報やMyマシンのASUS Flip C434TAのレビューなどを書いています。その他IT機器のアプリのレビュー、たまに100円ショップなど。


スポンサーリンク

 - Google Apps Script, Google Dirve