Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save apivat60/149324b7347da3203424753ed6b01509 to your computer and use it in GitHub Desktop.
Save apivat60/149324b7347da3203424753ed6b01509 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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;}th,td {text-align: center }</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>โรงเรียนอภิวัฒน์สอนสร้างสื่อวิทยาคม</span>
<img src="https://drive.google.com/uc?export=view&id=1PO_CTljdmsnvVnbcWnquVsfu-vSlh-yx" 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">ค้นหา</button>
</div><br>
<div id="resultdiv">
<table class="table teble-hover" id="tableId" border="1" cellpadding="5px"></table>
<div style="margin: 30px;">
<a href="" id="url">ดาวน์โหลดไฟล์</a>
</div>
</div>
<h6>💡 พัฒนาระบบโดย นายอภิวัฒน์ วงศ์กัณหา <br>หากพบปัญหา แจ้งมาได้ที่ 📞 089-1234567</h6>
</div>
<script>
var tableData = []
var tableHeaders = ['ลำดับ', 'รหัสวิชา', 'ชื่อวิชา', 'ผลการเรียน']
window.onload = () => {
$('#resultdiv').hide()
google.script.run.withSuccessHandler(createTable).getSheetData()
}
$('#searchButton').click(() => {
$('#resultdiv').show()
$('#tableId tr').remove()
let table = document.getElementById(" tableId")
let search = $("#search").val()
if (search == "") {
$('#resultdiv').hide() }
$('table').append(`<tr class="table-warning" id="nameCell"> </tr>`)
$('table').append(`<tr id="image"> </tr>`)
//สร้าง headers ให้ตาราง
$('table').append(`<tr class="table-info" id="tableHeaders"></tr>`)
tableHeaders.forEach(header => {
$('#tableHeaders').append(`<th>${header}</th>`)
})
let gpa = 0
let rowArray = tableData.find(row =>
row[0].toString().toLowerCase() == search.toLowerCase())
if (rowArray != null) {
$('#resultdiv').show()
$('#image').append(`<td colspan="4" style="font-size:25px">
<img src="https://drive.google.com/uc?export=view&id=${rowArray[12]}" width="60" height="60"></td>`)
$('#nameCell').append(`<td colspan="4" style="font-size:25px"> ผลการเรียนของ : ${rowArray[1]}</td>`)
$('#url').attr('href', rowArray[rowArray.length - 2])
rowArray.forEach((col, j) => {
if (tableData[0][j] == 'เกรดเฉลี่ย') gpa = col
if (j > 1 && j < rowArray.length - 3) {
$('table').append(`<tr id="TR${tableData[0][j]}"></tr>`)
$('#TR' + tableData[0][j]).append(`<td style="width:5%">${j - 1}</td>`)
$('#TR' + tableData[0][j]).append(`<td style="width:15%">${tableData[1][j]}</td>`)
$('#TR' + tableData[0][j]).append(`<td>${tableData[0][j]}</td>`)
$('#TR' + tableData[0][j]).append(`<td style="width:15%">${col}</td>`)
}
})
$('table').append(`<tr> <td></td> <td></td> <td>เกรดเฉลี่ย</td> <td>${gpa}</td> </tr>`)
} else {
alert('กรุณากรอกรหัสนักเรียนที่ถูกต้อง')
$('#resultdiv').hide()
}
})
function createTable(data) {
tableData = data
}
document.getElementById('search').addEventListener("keyup", function (event) {
// Number 13 is the "Enter" key on the keyboard
if (event.keyCode === 13) {
// Cancel the default action, if needed
event.preventDefault();
// Trigger the button element with a click
document.getElementById("searchButton").click();
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment