บทความนี้อธิบายฟังก์ชั่นการค้นหาต่าง ๆ ของ JS เพื่อใช้ข้อมูลตาราง มันสามารถเพิกเฉยต่อกรณีการค้นหาฟัซซี่และการค้นหาคีย์หลายครั้ง แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
คัดลอกรหัสดังต่อไปนี้: <! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> </title>
<script type = "text/javascript">
window.onload = function () {
var otab = document.getElementById ("tab");
var obt = document.getElementsByTagname ("อินพุต");
obt [1] .onclick = function () {
สำหรับ (var i = 0; i <otab.tbodies [0] .rows.length; i ++)
-
var str1 = otab.tbodies [0] .rows [i] .cells [1] .innerhtml.touppercase ();
var str2 = obt [0] .value.touppercase ();
// ใช้ string.touppercase () (แปลงอักขระทั้งหมดในสตริงเป็น uppercase) หรือ string.toLowerCase () (แปลงอักขระทั้งหมดในสตริงเป็นตัวพิมพ์เล็ก)
// การค้นหาที่เรียกว่าการละเว้นตัวพิมพ์ใหญ่และตัวพิมพ์เล็กคือการแปลงสตริงทั้งหมดที่ป้อนโดยผู้ใช้เป็นตัวพิมพ์ใหญ่หรือตัวพิมพ์เล็กจากนั้นแปลงสตริงทั้งหมดในตารางข้อมูลเป็นตัวพิมพ์ใหญ่หรือตัวพิมพ์เล็กในที่สุด
/************************* js ใช้ตารางละเว้นการค้นหากรณี ***********************************************************
if (str1 == str2) {
otab.tbodies [0] .rows [i] .style.background = 'สีแดง';
-
อื่น{
otab.tbodies [0] .rows [i] .style.background = '';
-
/**************************** js ใช้การค้นหาตาราง ******************************
// การค้นหาแบบฟัซซี่ของตารางคือการใช้วิธีการค้นหา () ใน JS โดยใช้รูปแบบ, string1.search (String2);
// สตริงที่ป้อนโดยผู้ใช้เป็นสายย่อยซึ่งจะส่งคืนตำแหน่งของสตริงย่อยในสตริงหลัก หากไม่ตรงกันมันจะกลับมา -1 ดังนั้นการดำเนินการมีดังนี้
if (str1.search (str2)! =-1) {otab.tbodies [0] .rows [i] .style.background = 'red';}
else {otab.tbodies [0] .rows [i] .style.background = '';}
/***************************** js ใช้การค้นหาคำพูดหลายคีย์สำหรับตาราง ******************************
// ค้นหาคำหลักหลายคำในตาราง หากคุณเพิ่มคำหลักหลายคำที่ผู้ใช้ป้อนให้ใช้วิธีการแยกเพื่อแบ่งสตริงยาวเป็นอาร์เรย์สตริงที่มีช่องว่างเป็นมาตรฐาน
// จากนั้นเปรียบเทียบ substrings ของอาร์เรย์ตัดกับสตริงในตารางข้อมูลในลูป
var arr = str2.split ('');
สำหรับ (var j = 0; j <arr.length; j ++)
-
if (str1.search (arr [j])! =-1) {otab.tbodies [0] .rows [i] .style.background = 'red';}
-
-
-
-
</script>
</head>
<body>
ชื่อ: <อินพุต type = "text" />
<อินพุต type = "button" value = "search"/>>>>
<Table BorderColor = "blue" id = "tab">
<head>
<td> <h2> id </h2> </td>
<td> <h2> ชื่อ </h2> </td>
<td> <h2> อายุ </h2> </td>
</head>
<tbody>
<tr>
<td> 1 </td>
<td> สีน้ำเงิน </td>
<Td> 15 </td>
</tr>
<tr>
<Td> 2 </td>
<td> mikyou </td>
<Td> 26 </td>
</tr>
<tr>
<td> 3 </td>
<td> อ่อนแอ </td>
<Td> 24 </td>
</tr>
<tr>
<td> 4 </td>
<td> Sky </td>
<td> 35 </td>
</tr>
<tr>
<td> 5 </td>
<td> li si </td>
<Td> 18 </td>
</tr>
</tbody>
</table>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน