apivat60 · November 20, 2020 13:08
diff --git a/code web app แบบ 4 คอลัมน์ b/code web app แบบ 4 คอลัมน์
 <!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/[email protected]/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>
	<!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/[email protected]/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>