210-seat/web/views/show.ejs
2019-04-18 01:00:22 +08:00

77 lines
3.1 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title><%= title %></title>
<meta charset="UTF-8">
<!-- Tocas UICSS 與元件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.css">
<!-- Tocas JS模塊與 JavaScript 函式 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.js"></script>
<style>
.main {
padding: 4em 0;
}
.highlight {
background-color: yellow !important;
}
</style>
</head>
<body>
<div class="ts main container">
<div class="ts grid" style="margin-bottom: 1em;">
<div class="stretched column">
<div class="ts header">
210 選(?)座位系統
</div>
</div>
<div class="column">
<a class="ts button" href="./login">登入</a>
</div>
</div>
<div class="ts container" style="overflow-x: auto">
<table class="ts center aligned basic celled table">
<thead>
<tr>
<th colspan="<%= seats[0].length %>">講台</th>
</tr>
</thead>
<tbody>
<% seats.forEach(function (row){ %>
<tr>
<% row.forEach(function (no){ %>
<td><%= (no != 0) ? no : "X" %></td>
<% }); %>
</tr>
<% }); %>
</tbody>
</table>
<div class="ts horizontal section divider">
<span class="text">我是分隔線</span>
</div>
<div class="ts fluid action input">
<input type="text" placeholder="座號" pattern="^\d$" id="input">
<button class="ts button" id="button">搜尋</button>
</div>
</div>
</div>
<script>
document.querySelector('#button').addEventListener('click', function () {
let seats = document.querySelector('tbody');
let target = document.querySelector('#input').value;
for (let i = 0; i < seats.children.length; i++) {
for (let j = 0; j < seats.children[i].children.length; j++) {
if (seats.children[i].children[j].innerText == target && target != "X") {
seats.children[i].children[j].classList.toggle('highlight', true);
} else {
seats.children[i].children[j].classList.toggle('highlight', false);
}
}
}
});
</script>
</body>
</html>