ページ内で特定の文字列を検索して、テーブル内のレコード抽出しています。
(抽出はできています)
この後、抽出されたレコード内の特定の文字列(検索した文字列)の色を変える、という仕組みを作りたいのですが、うまくいきません。
CSSのハイライトをどのように記述すればいいのでしょうか。
以下のような仕組みです。
1.検索ボックスに文字を入力する
2.検索ボタンを押す
3.該当のレコードのみ表示する and 検索した文字列の色を変える
1.すべて表示ボタンをクリックする
2.文字列の色を元に戻す
jQuery
1$(function() { 2 $('#button1').on("click", function() { 3 var re = new RegExp($('#search').val().trim().replace(/ +/, "|")); 4 $('#result tbody tr').each(function() { 5 $(this).toggle($(this).find('td').filter(function() { 6 return $(this).text().match(re) ? true : false; 7 }).length > 0); 8 }); 9 }); 10 $('#button2').on("click", function() { 11 $('#result tbody tr').each(function() { 12 var tr = $(this); 13 var re = $('#search').val().trim().split(/ +/); 14 var flg = re.map(function(x) { 15 return tr.has($('td').filter(function() { 16 return $(this).text().match(new RegExp(x)); 17 })).get(); 18 }).filter(function(x) { 19 return x.length > 0; 20 }).length == re.length; 21 tr.toggle(flg); 22 }); 23 }); 24 $('#button3').on("click", function() { 25 $('#result tr').show(); 26 }); 27}); 28
CSS
1.highlight { 2 background-color: yellow 3}
html
1<head> 2<script type="text/javascript" src="jquery.js"></script> 3<script type="text/javascript" src="jquery-highlight-5s.js"></script> 4</head> 5<body> 6 7<p> <input type="text" id="search" value=" "> <input type="button" value="and検索" id="button2" id="btn-onoff"> <input type="button" value="すべて表示" id="button3"> </p> 8<table id="result"> 9 10 11 12</body>
回答1件
あなたの回答
tips
プレビュー