シリーズ④、最終回です。

#####まとめ・完成形・対象者はこちら
スプレッドシート⇆html 双方向の値受け渡し　CRUD（追加更新・削除）処理　（GAS、javascript、jqueryのみ）

#####過去回
①スプレッドシート（サーバー）→html（クライアント）へ値受け渡し（ロード、テンプレ読み込み時）
②スプレッドシート→htmlに渡した値をテーブル形式に（jquery）
③webページでテーブルの行削除→同時にスプレッドシートも同じ行削除

###◆今回やること

index.htmlのtableに行追加ボタン設置
クリック　→　webページで行・input・登録ボタンを追加
登録ボタンクリック　→　index.htmlのjavascript関数呼び出し
index.html3のjs関数　→　コード.gsのGAS関数呼び出し、スプシ行・値挿入
(3で）登録ボタンを非活性化

わかりずらかったら、最下層の完成形（結果・動作）見た方が早いかも?です

ではコードいきましょう

###◆コード

コード.gs
追加箇所：ssInsvals　
中身：登録ボタンクリック時呼び出し、スプシに行・値挿入

コード.js


//htmlテンプレ作成スプシ値取得

function valsget() {
  let ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("テスト");
  let vals = ss.getDataRange().getValues();
  vals.shift();
  return vals;
}

//htmlテンプレ作成

function doGet(){
  let hotpt = HtmlService.createTemplateFromFile('index').evaluate();
  hotpt.setTitle('CRUDテスト');
  return hotpt;
}

//クライアント側で削除ボタンクリック時に呼ばれるGAS関数

function rowdel(rw) {　　//rwで行数$rowIndexを受け取る
  let ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("テスト");
  ss.deleteRows(rw); // ←　rwの行を丸々削除
}

//↓前回から追加箇所
//登録ボタンクリック時呼び出し、スプシに行・値挿入
function ssInsvals(rw,area,district,city){
  let ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("テスト");
  ss.insertRows(rw);
  ss.getRange(rw,1).setValue(area);
  ss.getRange(rw,2).setValue(district);
  ss.getRange(rw,3).setValue(city);

}

index.html

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>  
    <table id="tbl" border="1">
      <tr>
        <th>地域</th>
        <th>都道府県</th>
　　　　　<th>県庁所在地</th>
        <th>追加ボタン</th>
        <th>削除ボタン</th>
      </tr>
    </table>    
  </body>
</html>

<script
  src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
  integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
  crossorigin="anonymous"></script>

<script>

  window.onload = function(){

    google.script.run.withSuccessHandler(dt=>
    {
      for(let i =0;i<dt.length;i++){
        let $tr = $('<tr></tr>');
        $tr.append($('<td></td>').text(dt[i][0])); 
        $tr.append($('<td></td>').text(dt[i][1])); 
        $tr.append($('<td></td>').text(dt[i][2])); 
        $tr.append($('<button></button>').text('下行追加').on('click',add));
        $tr.append($('<button></button>').text('削除').on('click',del));
        $('#tbl').append($tr);       
        }     
    }).valsget();
  }  


//削除ボタンのイベント処理
  function del(){

    var $rowIdx = $(this).parent()[0].rowIndex;
    //削除ボタンの親要素tr取得　→　rowIndexでtrの行取得

    let tru_fal = confirm($rowIdx+"行目を削除しますか");
    //削除のアラート。行数がわかるように一応入れてるだけです。

    //以下、confirmがtrueの処理
    if (tru_fal){
      //一番近いtrを取得　→　削除
      $(this).closest("tr").remove();

      //GAS側のrowdel関数に、行数を引数で渡す　→　rowdelを実行、スプシ行削除
      google.script.run.rowdel($rowIdx+1);

      }
  }


//追加ボタンのイベント処理

  function add(){
    var $cur_row = $(this).closest("tr");
  
    let $tr = $('<tr></tr>');
    $tr.append($('<input></input>').attr('class', 'area')); //input追加、class設定
    $tr.append($('<input></input>').attr('class', 'district'));　//input追加、class設定
    $tr.append($('<input></input>').attr('class', 'city'));　//input追加、class設定
    $tr.append($('<button></button>').text('登録').on('click',ssIns));　
    //登録ボタン追加、clickイベント設定
    $tr.append($('<button></button>').text('削除').on('click',del));

    $cur_row.after($tr);

  }


//登録ボタンのイベント処理

  function ssIns(){
    var $rowIdx = $(this).parent()[0].rowIndex;
    // confirm($rowIdx+"行目を登録しますか");
    
    let $areaInpval = $(this).closest("tr").find('.area').val();
    //ボタンから近いtr取得　→　trの中のclassからinput要素取得　→ inputの値取得
    let $distInpval = $(this).closest("tr").find(".district").val();
    let $cityInpval = $(this).closest("tr").find(".city").val();


    google.script.run.ssInsvals($rowIdx,$areaInpval,$distInpval,$cityInpval);
    alert("登録しました");
    $(this).prop('disabled', true);
    
  }

</script>

###◆結果、動作

・スプシ

・webページ行追加ボタン表示が追加されてます

・行追加ボタンクリック → 行追加
※css入れてないので、こうなります。ご容赦ください

--

・適当にデータ入れて登録ボタンクリック

・登録ボタンを非活性化

・スプレッドシートにデータ挿入されてます

・画面リロードしてもちゃんと表示します