Untitled

///////////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...