【GAS】②스프레드시트→html에 건네준 값을 테이블 형식으로(jquery)
스프레드시트 ⇆html 양방향 값 전달 CRUD(추가 갱신·삭제) 처리(GAS, javascript, jquery만)
지난번
【GAS】①스프레드시트→html에 값 전달(로드, 템플리 로드시)
다음 번
【GAS】③web페이지에서 테이블의 행 삭제→스프레드시트도 같은 행 삭제
◆ 이번에 할 일
마지막으로 스푸시에서 html로 데이터를 전달하여 표시했습니다.
● 스푸시
● 웹 페이지
이번에는, 웹 페이지에 출력한 데이터를,
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로 값을 받아 테이블에 넣습니다.
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>
◆ 결과 웹 페이지
테이블 형식으로 표시되었습니다.
Reference
이 문제에 관하여(【GAS】②스프레드시트→html에 건네준 값을 테이블 형식으로(jquery)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/forever---beginner/items/307f7609028fa7852755텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
