【GAS】②スプレッドシート→htmlに渡した値をテーブル形式に（jquery）

8668 ワード
HTML JavaScript スプレットシート jQuery gas HTML テキストリンク

まとめ・最終完成形・対象など
スプレッドシート⇆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形式で表示されました。