ホームページ > 記事 > ウェブフロントエンド > テーブルデータの各種検索機能を実装するJSメソッド_JavaScriptスキル
テーブルデータの各種検索機能を実装するJSメソッド_JavaScriptスキル
- WBOYオリジナル
- 2016-05-16 16:11:22972ブラウズ
この記事の例では、JS がテーブル データのさまざまな検索関数を実装する方法について説明します。大文字と小文字を無視したり、あいまい検索、複数キー検索が可能です。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。
コードをコピー コードは次のとおりです:
<頭>
<スクリプトタイプ="text/javascript">
window.onload=function(){
var oTab=document.getElementById("タブ");
var oBt=document.getElementsByTagName("input");
oBt[1].onclick=function(){
for(var i=0;i
var str1=oTab.tBodies[0].rows[i].cells[1].innerHTML.toUpperCase();
var str2=oBt[0].value.toUpperCase();
// string.toUpperCase() (文字列内のすべての文字を大文字に変換) または string.toLowerCase() (文字列内のすべての文字を小文字に変換) を使用します
//いわゆる大文字と小文字を無視した検索では、ユーザーが入力したすべての文字列を大文字または小文字に変換し、次に情報テーブル内のすべての文字列を大文字または小文字に変換し、最後に変換された文字を 2 つ間で比較します。
/************************************大文字小文字検索を無視したテーブルのJS実装********** ******** *******************/
If(str1==str2){
oTab.tBodies[0].rows[i].style.background='red';
}
else{
oTab.tBodies[0].rows[i].style.background='';
}
/************************************JS はテーブルのあいまい検索を実装します*********** ******* *************************/
//テーブルのあいまい検索は、string1.search(string2) の形式を使用して、JS の search() メソッドによって行われます。 //ユーザーが入力した文字列が部分文字列の場合、主文字列内の部分文字列の位置が返され、一致しない場合は-1が返されるので、次のような動作になります。 If(str1.search(str2)!=-1){oTab.tBodies[0].rows[i].style.background='red';}
else{oTab.tBodies[0].rows[i].style.background='';}
/***********************************JS はテーブルの複数キーワード検索を実装します********* ***********************/
//テーブルの複数キーワード検索。ユーザーが入力した複数のキーワードをスペースで区切って追加します。split メソッドを使用して、スペースを標準として使用して長い文字列を文字列配列に分割します。
//次にループを使用して、切り取った配列の部分文字列を情報テーブル内の文字列と比較します
var arr=str2.split(' ');
for(var j=0;j
If(str1.search(arr[j])!=-1){oTab.tBodies[0].rows[i].style.background='red';}
}
}
}
}
名前:
ID | 名前 | 年齢 |
| 1 | ブルー | 15 |
| 2 | ミキョウ | 26 |
| 3 | 弱い | 24 |
| 4 | 空 | 35 |
| 5 | 李思 | 18 |