【GAS】【html→GAS 값 전달】③web페이지에서 테이블의 행 삭제→동시에 스프레드시트도 같은 행 삭제
정리는 여기.
스프레드시트 ⇆html 양방향 값 전달 CRUD(추가 갱신·삭제) 처리(GAS, javascript, jquery만)
과거 분
①스프레드시트(서버)→html(클라이언트)에 값 전달(로드, 템플리 로드 시)
②스프레드시트→html에 건네준 값을 테이블 형식으로(jquery)
◆전회까지
아래 스푸시
아래 웹 페이지에 표시했습니다.
◆ 이번에 할 일
1. 미리 준비한 스푸시 행 삭제의 GAS 함수 호출 → 스프레드 시트도 같은 행을 삭제합니다.
◆코드
index.html에서는 다음을 수행합니다.
※그 외, table 태그에 border=1과,th 삭제 버튼을 추가,
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>
코드.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の行を丸々削除
}
실행 결과
삭제 버튼을 누르면
웹페이지 삭제
스프레드시트도 삭제되었습니다.
◆감상
jquery의 가까운 요소를 얻고 메소드 체인이 하나님을 굉장히 편리하다고 생각했습니다.
Reference
이 문제에 관하여(【GAS】【html→GAS 값 전달】③web페이지에서 테이블의 행 삭제→동시에 스프레드시트도 같은 행 삭제), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/forever---beginner/items/88878e4ccd474a73dfed텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
