まとめ・最終完成形・対象など
スプレッドシート⇆html 双方向の値受け渡し CRUD（追加更新・削除）処理 （GAS、javascript、jqueryのみ）
前回
【GAS】①スプレッドシート→htmlへ値受け渡し（ロード、テンプレ読み込み時）
次回
【GAS】③webページでテーブルの行削除→スプレッドシートも同じ行削除
###◆今回やること
前回スプシからhtmlにデータを渡して表示しました
●スプシ
●webページ
今回は、webページに出力したデータを、
tableに、順番に入れていきます。
##◆実際のコード
###GAS値取得、html出力
前回とほぼ同じです。
前回との相違：shiftでヘッダー削除しています。
繰り返し時にthだけの処理を入れるのが面倒なので、、、
コード.gs
function doGet(){
let hotpt = HtmlService.createTemplateFromFile('index').evaluate();
hotpt.setTitle('CRUDテスト');
return hotpt;
}
function valsget() {
let ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("テスト");
let vals = ss.getDataRange().getValues();
vals.shift(); //ここを前回から追加
return vals;
}
###htmlで値受け取り、tableに入れていきます
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<table id="tbl"><!--前もってthだけ作っておきます。-->
<tr>
<th>地域</th>
<th>都道府県</th>
<th>県庁所在地</th>
</tr>
</table>
</body>
</html>
<!--jQueryのCDN読み込み-->
<script
src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
crossorigin="anonymous"></script>
<!--以下、クライアント側javascript-->
<script>
window.onload = function(){
google.script.run.withSuccessHandler(function(dt){ //dtにvalgetの取得値を渡す
for(let i =0;i<dt.length;i++){ //dtの配列の数だけ繰り返し
let $tr = $('<tr></tr>'); //jqueryオブジェクトでtr作成
$tr.append($('<td></td>').text(dt[i][0])); //trにtdを追加していく
$tr.append($('<td></td>').text(dt[i][1]));
$tr.append($('<td></td>').text(dt[i][2]));
$('#tbl').append($tr); //出来上がったtrをtableに行追加
}
}).valsget();
}
</script>
###◆結果のwebページ
table形式で表示されました。
