โดยจากนนี้จะเป็นการแสดงตัวอย่างการใช้งานร่วมกัน ระหว่างภาษาคอมพิวเตอร์เพื่อที่จะได้ผลลัพธ์ที่แสดงให้ผู้ใช้งานได้ใช้งานได้สะดวกมากขึ้น นั้นคือการใช้งาน JQuery สำหรับการค้นหาข้อมูลที่สอดคล้องที่กรอกเข้า โดยมีตัวอย่างดังนี้
1.ตัวอย่างโคด html
โค้ด: เลือกทั้งหมด
<html>
<head>
---- css ----
--- jquery ---
</head>
<body>
<div>
<h2>Live Search</h2>
<input id="myInput" type="text" placeholder="Search..">
<br><br>
<table>
<thead>
<tr>
<th>ชื่อ</th>
<th>นามสกุล</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>ทันจิโร่</td>
<td>คามาโดะ</td>
<td>[email protected]</td>
</tr>
<tr>
<td>เนสึโกะ</td>
<td>คามาโดะ</td>
<td>[email protected]</td>
</tr>
<tr>
<td>สึยูริ</td>
<td>คานาโอะ</td>
<td>[email protected]</td>
</tr>
<tr>
<td>ชิโนบุ</td>
<td>โคโช</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
2.ตัวอย่างโคด CSS
โค้ด: เลือกทั้งหมด
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
background-color: #fff;
}
tr:nth-child(even){background-color: #f2f2f2}
th {
background-color: #4CAF50;
color: white;
}
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid red;
border-radius: 4px;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
โค้ด: เลือกทั้งหมด
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
ตัวอย่างผลลัพธ์
บทความเพิ่มเติม
วิธีการการใช้ jquery เข้ามาปรับแก้ไขการแสดงของรูปภาพ เพื่อขยายและขยับตำแหน่ง ของ รูปภาพ
วิธีการใช้งาน JQuery กับ Ajax เพื่อค้นหาข้อมูลจากฐานข้อมูลว่ามมีจริงหรือไม
การใส่ค่าในช่อง input ด้วย javascript เพื่อจะได้มีค่าอยู่ใน textbox