1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-05-29

まとめ・最終完成形・対象など
スプレッドシート⇆html 双方向の値受け渡し CRUD(追加更新・削除)処理 (GAS、javascript、jqueryのみ) 

前回
【GAS】①スプレッドシート→htmlへ値受け渡し(ロード、テンプレ読み込み時)

次回
【GAS】③webページでテーブルの行削除→スプレッドシートも同じ行削除

###◆今回やること

前回スプシからhtmlにデータを渡して表示しました

●スプシ
スクリーンショット 2021-05-29 14.41.39.png

●webページ
スクリーンショット 2021-05-29 14.40.24.png

今回は、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形式で表示されました。
スクリーンショット 2021-05-29 15.47.35.png

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?