teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

修正

2019/01/18 01:26

投稿

yambejp
yambejp

スコア117912

answer CHANGED
@@ -4,7 +4,7 @@
4
4
  <script>
5
5
  $(function(){
6
6
  $('#button1').on("click",function(){
7
- var re = new RegExp($('#search').val().trim().replace(/ +/,"|"));
7
+ var re = new RegExp($('#search').val().trim().replace(/ +/g,"|"));
8
8
  $('#result tbody tr').each(function(){
9
9
  $(this).toggle($(this).find('td').filter(function(){
10
10
  return $(this).text().match(re)?true:false;
@@ -28,27 +28,27 @@
28
28
  $('#button3').on("click",function(){
29
29
  $('#result tr').show();
30
30
  });
31
- $('#button4').on("click",function(){
31
+ $('#check1').on("change",function(){
32
+ $('#result td').each(function(){
33
+ $(this).text($(this).text());
34
+ });
32
- if($(this).data('on')!="1"){
35
+ if($(this).prop('checked')){
33
- $(this).data('on',"1");
34
36
  $('#result td').each(function(){
35
- var re = new RegExp("("+$('#search').val().trim().replace(/ +/,"|")+")+",'g');
37
+ var re = new RegExp("("+$('#search').val().trim().replace(/ +/g,"|")+")+",'g');
36
38
  $(this).html($(this).html().replace(re,'<span style="display:inline-block;background-color:yellow">$&</span>'));
37
39
  });
38
- }else{
39
- $(this).data('on',null);
40
- $('#result td').each(function(){
41
- $(this).text($(this).text());
42
- });
43
40
  }
44
41
  });
42
+ $('#search').on('keyup',function(){
43
+ $('#check1').trigger('change');
44
+ });
45
45
  });
46
46
  </script>
47
47
  <input type="text" id="search" value=" a b ">
48
48
  <input type="button" value="or検索" id="button1">
49
49
  <input type="button" value="and検索" id="button2">
50
50
  <input type="button" value="すべて表示" id="button3">
51
- <input type="button" value="ハイライト" id="button4">
51
+ <label><input type="checkbox" id="check1">ハイライト</label>
52
52
 
53
53
  <table id="result">
54
54
  <tbody>