Artikel ini menjelaskan berbagai fungsi pencarian JS untuk mengimplementasikan data tabel. Ini dapat mengabaikan kasus, pencarian fuzzy, dan beberapa pencarian kunci. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salin kode sebagai berikut: <! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<title> </title>
<type skrip = "Teks/JavaScript">
window.onload = function () {
var otab = document.geteLementById ("tab");
var obt = document.geteLementsbyTagname ("input");
Obt [1] .onClick = function () {
untuk (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 ();
// Gunakan string.touppercase () (Konversi semua karakter dalam string ke huruf besar) atau string.tolowercase () (Konversi semua karakter dalam string ke huruf kecil)
// Pencarian yang disebut untuk mengabaikan huruf besar dan huruf kecil adalah untuk mengubah semua string yang dimasukkan oleh pengguna menjadi huruf besar atau kecil, kemudian mengonversi semua string dalam tabel informasi menjadi huruf besar atau kecil, dan akhirnya membandingkan karakter yang dikonversi dari keduanya.
/*************************** JS mengimplementasikan Tabel Abaikan pencarian kasus **********************************/
if (str1 == str2) {
otab.tbodies [0] .rows [i] .style.background = 'merah';
}
kalau tidak{
otab.tbodies [0] .rows [i] .style.background = '';
}
/****************************** JS mengimplementasikan pencarian fuzzy tabel **************************/
// Pencarian fuzzy tabel adalah menggunakan metode pencarian () di JS, menggunakan format, string1.search (string2);
// String yang dimasukkan oleh pengguna adalah substring, yang akan mengembalikan posisi substring di string utama. Jika tidak cocok, itu akan mengembalikan -1. Oleh karena itu, operasinya adalah sebagai berikut
if (str1.search (str2)! =-1) {otab.tbodies [0] .rows [i] .style.background = 'red';}
else {otab.tbodies [0] .rows [i] .style.background = '';}
/********************************* JS mengimplementasikan Multi-Keyword Search untuk Tabel **************************/
// Cari beberapa kata kunci dalam tabel. Jika Anda menambahkan beberapa kata kunci yang dimasukkan oleh pengguna, gunakan metode split untuk membagi string panjang ke dalam array string dengan spasi sebagai standar.
// Kemudian bandingkan substring array potong dengan string di tabel informasi dalam satu loop
var arr = str2.split ('');
untuk (var j = 0; j <arr.length; j ++)
{
if (str1.search (arr [j])! =-1) {otab.tbodies [0] .rows [i] .style.background = 'red';}
}
}
}
}
</script>
</head>
<body>
Nama: <input type = "text" />
<input type = "tombol" value = "cari"/>
<tabel bordercolor = "blue" id = "tab">
<head>
<td> <h2> id </h2> </td>
<td> <h2> Nama </h2> </td>
<td> <h2> Usia </h2> </td>
</head>
<tbody>
<tr>
<td> 1 </td>
<td> biru </td>
<td> 15 </td>
</tr>
<tr>
<td> 2 </td>
<td> mikyou </td>
<td> 26 </td>
</tr>
<tr>
<td> 3 </td>
<td> lemah </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>
</boable>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.