今回は
JavascriptでTable要素を絞り込んでみます。
キビキビ動いていい感じです。
それではやっていきましょう。
キビキビ動いていい感じです。
それではやっていきましょう。
目次
目標
Table要素をJavascriptで絞り込む。
サンプルコード
sample.html
<!DOCTYPE html>
<html>
<head>
<meta content="IE=edge"
http-equiv="X-UA-Compatible" />
<link href="./sample.css"
rel="stylesheet"
type="text/css" />
<title>Selecters</title>
<script type="text/javascript">
//第一引数フィルタリング対象テーブル
//第二引数フィルタリングキーワード
function exefilter(targettableid,filterkeywordid){
//フィルター処理対象テーブル取得
var target = document.getElementById(targettableid);
//フィルター処理キーワード取得
var keyword =
document.getElementById(filterkeywordid).value;
//テーブル全体で検索に合致したか判定するフラグ
var Flag_search_Result_Table=false;
//検索対象1行で検索に合致したか判定するフラグ
var Flag_search_Result=false;
for(i=0;i<target.rows.length;i++){
//フラグリセット
Flag_search_Result=false;
for(j=0;j<target.rows[i].cells.length;j++){
var s =
target.rows[i].cells[j].innerText.indexOf(keyword);
if(s > -1){
Flag_search_Result=true;
}
}
//検索結果がtrueの列は表示する。
if( Flag_search_Result){
target.rows[i].style.display='table-row';
//テーブル内で一件でも表示できたならtrue
Flag_search_Result_Table=true;
}
else{
target.rows[i].style.display='none';
}
}
//一件も検索に合致しない場合には全件表示する。
if(Flag_search_Result_Table==false){
for(i=0;i<target.rows.length;i++){
target.rows[i].style.display='table-row';
}
}
}
</script>
</head>
<body>
<div class="container">
<main>
<div id="textarea">
<input onkeyup="exefilter('fil_table','filv');"
type="text" id="filv"/>
<table id="fil_table">
<tr>
<td>1</td>
<td>リンゴ</td>
<td>くだもの</td>
</tr>
<tr>
<td>2</td>
<td>オレンジ</td>
<td>くだもの</td>
</tr>
<tr>
<td>3</td>
<td>バナナ</td>
<td>くだもの</td>
</tr>
<tr>
<td>4</td>
<td>アプリコット</td>
<td>くだもの</td>
</tr>
<tr>
<td>5</td>
<td>ダイコン</td>
<td>やさい</td>
</tr>
<tr>
<td>6</td>
<td>ニンジン</td>
<td>やさい</td>
</tr>
</table>
</div>
</main>
</div>
</body>
</html>
|
samplecss.css
省略します。実行例-表示例
テキストボックスにキーワードを入れると該当する行だけを表示を表示します。
該当する行が無いときはすべての行を表示します。
該当する行が無いときはすべての行を表示します。
ポイント！
- 文字列変数.indexOf(["検索対象文字列"])で文字列の検索ができる。
-
tableオブジェクト.rows[列番号].sells[行番号].innerTextで
テーブルのセルの中のテキストの値にアクセスできる。
終わりに
サクサクと絞込みフィルタリングができました。
動きもいいので気持ちがいいですね。
ご参考になれば幸いです。
ご利用は自己責任で。
動きもいいので気持ちがいいですね。
ご参考になれば幸いです。
ご利用は自己責任で。
0 件のコメント:
コメントを投稿