【GAS】【html→GAS 値渡す】③webページでテーブルの行削除→同時にスプレッドシートも同じ行削除

シリーズ③でございます。

まとめはこちら。
[スプレッドシート⇆html 双方向の値受け渡し　CRUD（追加更新・削除）処理　（GAS、javascript、jqueryのみ）](https://qiita.com/forever---beginner/items/2afe3b48202041297e78)

過去分

[①スプレッドシート（サーバー）→html（クライアント）へ値受け渡し（ロード、テンプレ読み込み時）](https://qiita.com/forever---beginner/items/8e6f1e9c019070d43954)
[②スプレッドシート→htmlに渡した値をテーブル形式に（jquery）](https://qiita.com/forever---beginner/items/307f7609028fa7852755)

###◆前回まで

下記スプシを

|![スクリーンショット 2021-05-29 14.41.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1563301/a09ad1b2-51ee-2f81-ec79-a9da4d2c4bca.png)|
|:--|

下記webページに表示しました。

|![スクリーンショット 2021-05-29 15.47.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1563301/95066e75-ed89-a162-700f-211a40c3bd70.png)|
|:--|

###◆今回やること

1. htmlのtableに削除ボタンを配置
1. 削除ボタンのclickイベント追加、イベント発火時の関数の内容は下3つ
  - クリック時に、ボタン自身の行を取得
  - htmlのtable行削除
1.あらかじめ用意した、スプシ行削除のGAS関数呼び出し→スプレッドシートも同じ行を削除


---
###◆コード

index.htmlでは、下記を行います。

- 繰り返し処理時に削除ボタン配置
- クリックイベントのjavascriptを追記

※その他、tableタグにborder=1と、th削除ボタンを追加、

```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>
      </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',del));
 　　　　//↑tableのtdに削除ボタン配置  
　　　　　$('#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){
      
      $(this).closest("tr").remove();　　//一番近いtrを取得　→　削除

      google.script.run.rowdel($rowIdx+1);　
　　　　//GAS側のrowdel関数に、行数を引数で渡す　→　rowdelを実行、スプシ行削除
      //+1はスプレッドシートヘッダー分

      }
  }
</script>

```


```javascript:コード.js

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

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

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

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

```

---
###実行結果

|![スクリーンショット 2021-05-29 19.57.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1563301/9604f08d-ddbd-d72c-b02c-0a58c9bc2161.png)|
|:--|

削除ボタンを押すと

|![スクリーンショット 2021-05-29 19.58.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1563301/236d28a7-9d7d-7649-47b3-b4e89bf8b2b2.png)|
|:--|

webページ削除

|![スクリーンショット 2021-05-29 19.59.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1563301/4be08c82-ee27-a939-3a55-8f3bdca3c89c.png)|
|:--|

スプレッドシートも削除されてます

|![スクリーンショット 2021-05-29 20.00.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1563301/4fef0586-d16f-2877-efd1-409a2b447e3f.png)|
|:--|

###◆感想

jqueryの近い要素の取得とメソッドチェーンが神がかり的に便利だと思いました。