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; }
スポンサーリンク