neno-tech/code.gs

## code.gs
function doGet() {
  return HtmlService.createTemplateFromFile('555')
  .evaluate()
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
function submitData(obj){
  var ss = SpreadsheetApp.openById("xxx");
  var sheet = ss.getSheetByName("xxx");
  var  flag  =  1 ;
  var lr = sheet.getLastRow();
      for(var i = 1;i <= lr;i++){
  var id = sheet.getRange(i, 1).getValue();
      if(id == obj){
      flag = 0;
  var colB = sheet.getRange(i, 2).getValue();
  var colC = sheet.getRange(i, 3).getValue();
  var colD = sheet.getRange(i, 4).getValue();
  var colE = sheet.getRange(i, 5).getValue();
  var colF = sheet.getRange(i, 6).getDisplayValue();
  var data ="<table><tr><th colspan=2>ข้อมูลส่วนตัว.</th></tr><tr><td>ไอดี:</td><td>"
+obj+"</td></tr><tr><td>ชื่อ สกุล:</td><td>"+colB+"</td></tr><tr><td>เบอร์โทร:</td><td>"
+colC+"</td></tr><tr><td>อีเมล:</td><td>"+colD+"</td></tr><tr><td>ชื่อเล่น:</td><td>"+colE+"</td></tr><tr><td>วันเกิด:</td><td>"+colF+"</td></tr></table>";
  return data;
    }
   }
     if(flag==1){
  var data ="ไม่พบข้อมูล.";
      return data;
    }
    };

## index.html
<!DOCTYPE html>
<html>
  <head>
     <base target="_top" />
     <h2>เว็บแอประบบค้นหาข้อมูล</h2>
     <style>
input{
  width: 40%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
table {
  font-family: times;
  border-collapse: collapse;
  width: 50%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
  </head>
  <body align="center">
    <input type="text"id="id" placeholder="พิมพ์ไอดี"/>
    <br>
    <input type="submit" value="ค้นหา" onclick="info()"/>
    <hr><center>
    <div id="result"></div>
    </center>
    <script>
      function  info () {
        let obj = document.querySelector('#id').value;
        let updateLocation = document.querySelector('#result');
        updateLocation.innerHTML = "กำลังค้นหา...";

        function onFailure(error){
          let warning = "<span style='color:red'>"+error+"</span>";
          updateLocation.innerHTML = warning;
        };

        function onSuccess(response){
          let result ="<span style='color:blue'>"+response+"</span>";
          updateLocation.innerHTML = result;
        };
        google.script.run.withFailureHandler(onFailure)
                         .withSuccessHandler(onSuccess)
                         .submitData(obj);
      };
    </script>
  </body>
</html>
	function doGet() {
	return HtmlService.createTemplateFromFile('555')
	.evaluate()
	.addMetaTag('viewport', 'width=device-width, initial-scale=1')
	.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
	}
	function submitData(obj){
	var ss = SpreadsheetApp.openById("xxx");
	var sheet = ss.getSheetByName("xxx");
	var flag = 1 ;
	var lr = sheet.getLastRow();
	for(var i = 1;i <= lr;i++){
	var id = sheet.getRange(i, 1).getValue();
	if(id == obj){
	flag = 0;
	var colB = sheet.getRange(i, 2).getValue();
	var colC = sheet.getRange(i, 3).getValue();
	var colD = sheet.getRange(i, 4).getValue();
	var colE = sheet.getRange(i, 5).getValue();
	var colF = sheet.getRange(i, 6).getDisplayValue();
	var data ="<table><tr><th colspan=2>ข้อมูลส่วนตัว.</th></tr><tr><td>ไอดี:</td><td>"
	+obj+"</td></tr><tr><td>ชื่อ สกุล:</td><td>"+colB+"</td></tr><tr><td>เบอร์โทร:</td><td>"
	+colC+"</td></tr><tr><td>อีเมล:</td><td>"+colD+"</td></tr><tr><td>ชื่อเล่น:</td><td>"+colE+"</td></tr><tr><td>วันเกิด:</td><td>"+colF+"</td></tr></table>";
	return data;
	}
	}
	if(flag==1){
	var data ="ไม่พบข้อมูล.";
	return data;
	}
	};
	<!DOCTYPE html>
	<html>
	<head>
	<base target="_top" />
	<h2>เว็บแอประบบค้นหาข้อมูล</h2>
	<style>
	input{
	width: 40%;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	}
	table {
	font-family: times;
	border-collapse: collapse;
	width: 50%;
	}

	td, th {
	border: 1px solid #dddddd;
	text-align: left;
	padding: 8px;
	}

	tr:nth-child(even) {
	background-color: #dddddd;
	}
	</style>
	</head>
	<body align="center">
	<input type="text"id="id" placeholder="พิมพ์ไอดี"/>
	<br>
	<input type="submit" value="ค้นหา" onclick="info()"/>
	<hr><center>
	<div id="result"></div>
	</center>
	<script>
	function info () {
	let obj = document.querySelector('#id').value;
	let updateLocation = document.querySelector('#result');
	updateLocation.innerHTML = "กำลังค้นหา...";

	function onFailure(error){
	let warning = "<span style='color:red'>"+error+"</span>";
	updateLocation.innerHTML = warning;
	};

	function onSuccess(response){
	let result ="<span style='color:blue'>"+response+"</span>";
	updateLocation.innerHTML = result;
	};
	google.script.run.withFailureHandler(onFailure)
	.withSuccessHandler(onSuccess)
	.submitData(obj);
	};
	</script>
	</body>
	</html>