この記事では、テーブルデータを実装するJSのさまざまな検索関数について説明します。ケース、ファジー検索、複数のキー検索を無視できます。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
次のようにコードをコピーします：<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<title> </title>
<script type = "text/javascript">
window.onload = function（）{
var otab = document.getElementById（ "タブ"）;
var obk = document.getElementsByTagname（ "input"）;
obt [1] .onclick = function（）{
for（var i = 0; i <otab.tbodies [0] .rows.length; i ++）
{
var str1 = otab.tbodies [0] .rows [i] .cells [1] .innerhtml.touppercase（）;
var str2 = obb [0] .value.touppercase（）;
// string.touppercase（）（文字列内のすべての文字を大文字に変換）またはstring.tolowercase（）（文字列内のすべての文字を小文字に変換）を使用します
//大文字と小文字を無視するためのいわゆる検索では、ユーザーが入力したすべての文字列を大文字または小文字に変換し、情報表のすべての文字列を大文字または小文字に変換し、最後に2つの変換された文字を比較します。
/************************************* js実装テーブルはケース検索を無視します**************************/
if（str1 == str2）{
otab.tbodies [0] .rows [i] .style.background = 'red';
}
それ以外{
otab.tbodies [0] .rows [i] .style.background = '';
}
/*********************************** js実装テーブルのファジー検索************************/
//テーブルのファジー検索は、jsでsearch（）メソッドを使用して、形式、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実装マルチキーワードテーブルの検索************************/
//テーブル内の複数のキーワードを検索します。ユーザーが入力した複数のキーワードを追加する場合、分割方法を使用して、長い文字列を標準としてスペースのある文字列配列に分割します。
//次に、カットアレイのサブストリングをループ内の情報テーブルの文字列と比較します
var arr = str2.split（ ''）;
for（var j = 0; j <arr.length; j ++）
{
if（str1.search（arr [j]）！= -1）{otab.tbodies [0] .rows [i] .style.background = 'red';}
}
}
}
}
</script>
</head>
<body>
名前：<入力型= "text" />
<入力型= "ボタン"値= "検索"/>
<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> blue </td>
<td> 15 </td>
</tr>
<tr>
<td> 2 </td>
<td> mikyou </td>
<td> 26 </td>
</tr>
<tr>
<td> 3 </td>
<td> weak </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プログラミングに役立つことを願っています。