Untitled
unknown
plain_text
2 years ago
4.5 kB
5
Indexable
///////////code.gs/////////// function doGet(e) { var htmlOutput = HtmlService.createTemplateFromFile('index'); htmlOutput.search=''; return htmlOutput.evaluate(); } function doPost(e) { var search =e.parameter.search; var htmlOutput = HtmlService.createTemplateFromFile('index'); htmlOutput.search= search; return htmlOutput.evaluate(); } function getSheetData() { var ss= SpreadsheetApp.getActiveSpreadsheet(); var dataSheet = ss.getSheetByName('ม1'); var dataRange = dataSheet.getDataRange(); var dataValues = dataRange.getDisplayValues(); return dataValues; } function getUrl(){ var url =ScriptApp.getService().getUrl(); return url; Logger.log(url) } //web <!DOCTYPE html> <html> <head> <base target="_top"> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Prompt"> <style> body { font-family: "Prompt"; font-size: 16px; } </style> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <title>ระบบแจ้งผลการเรียนออนไลน์</title> </head> <body> <nav class="navbar navbar-dark bg-primary"> <span class="navbar-brand mb-0 h1">📣 ระบบแจ้งคะแนนออนไลน์วิชาภาษาจีน<br>LAOSHI เอฟ</span> <img src="https://building.kku.ac.th/wp-content/uploads/2019/08/Th_color.png" width="60" height="60" alt="" loading="lazy"> </nav> <div class="container-fluid" align="center"> <?var url = getUrl();?> <div> <label>พิมพ์รหัสนักเรียน 🔍</label><br> <input type="text" name="search" id="search" value="" /> <button id="searchButton">Search</button> </div><br> <table class = "table teble-hover" id="tableId" border="1" cellpadding="5px"> </table> <h6>💡 รายวิชาภาษาจีน ม.1 และ ม4 <br>โรงเรียนสาธิต มหาวิทยาลัยขอนแก่น ฝ่ายมัธยมศึกษา (ศึกษาศาสตร์)</h6> </div> <script> var tableData = [] window.onload = () => { $('#tableId').hide() google.script.run.withSuccessHandler(createTable).getSheetData() } $('#searchButton').click(()=>{ $('#tableId').show() $('#tableId tr').remove() let table = document.getElementById("tableId") let search = $("#search").val() if(search == ""){ $('#tableId').hide() } tableData.forEach((rowArray, i) => { if (i == 0) { $('table').append(`<tr class="table-info" ></tr>`) rowArray.forEach((col,j) => { if(j<rowArray.length-1){ $('table tr').append(`<th>${col}</th>`) } }) } else { var stringSearch = rowArray.toString().toLowerCase(); if (stringSearch.indexOf(search.toLowerCase()) != -1) { $('table').append(`<tr id="TR${rowArray[0]}"></tr>`) rowArray.forEach((col, j) => { if (j < rowArray.length - 2) { $('#TR' + rowArray[0]).append(`<td>${col}</td>`) } else if (j != rowArray.length - 1) { $('#TR' + rowArray[0]).append(`<td><a href=${rowArray[j + 1]}>${col}</a></td>`) } }) } } }) }) function createTable(data) { tableData = data } </script> </body> </html>
Editor is loading...