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

回答編集履歴

3

調整

2019/01/15 07:17

投稿

yambejp
yambejp

スコア117973

answer CHANGED
@@ -5,10 +5,11 @@
5
5
  (ただし「|」という文字はそのままでは検索できない)
6
6
 
7
7
  # sample
8
+ とりあえず冗長に書いてみました。
8
9
  ```javascript
9
10
  <script>
10
11
  $(function(){
11
- $('#button').on("click",function(){
12
+ $('#button1').on("click",function(){
12
13
  var re = new RegExp($('#search').val().trim().replace(/ +/,"|"));
13
14
  $('#result tbody tr').each(function(){
14
15
  $(this).toggle($(this).find('td').filter(function(){
@@ -17,13 +18,28 @@
17
18
  });
18
19
  });
19
20
  $('#button2').on("click",function(){
21
+ $('#result tbody tr').each(function(){
22
+ var tr=$(this);
23
+ var re=$('#search').val().trim().split(/ +/);
24
+ var flg=re.map(function(x){
25
+ return tr.has($('td').filter(function(){
26
+ return $(this).text().match(new RegExp(x));
27
+ })).get();
28
+ }).filter(function(x){
29
+ return x.length>0;
30
+ }).length==re.length;
31
+ tr.toggle(flg);
32
+ });
33
+ });
34
+ $('#button3').on("click",function(){
20
35
  $('#result tr').show();
21
36
  });
22
37
  });
23
38
  </script>
24
39
  <input type="text" id="search" value=" a b ">
25
- <input type="button" value="絞り込む" id="button">
40
+ <input type="button" value="or検索" id="button1">
41
+ <input type="button" value="and検索" id="button2">
26
- <input type="button" value="すべて表示" id="button2">
42
+ <input type="button" value="すべて表示" id="button3">
27
43
 
28
44
  <table id="result">
29
45
  <tbody>

2

chousei

2019/01/15 07:17

投稿

yambejp
yambejp

スコア117973

answer CHANGED
File without changes

1

sample

2019/01/15 07:16

投稿

yambejp
yambejp

スコア117973

answer CHANGED
@@ -2,4 +2,51 @@
2
2
  var re = new RegExp($('#search').val().trim().replace(/ +/,"|"));
3
3
  ```
4
4
  とすればスペース区切りで書かれたものはor検索できます。
5
- (ただし「|」という文字はそのままでは検索できない)
5
+ (ただし「|」という文字はそのままでは検索できない)
6
+
7
+ # sample
8
+ ```javascript
9
+ <script>
10
+ $(function(){
11
+ $('#button').on("click",function(){
12
+ var re = new RegExp($('#search').val().trim().replace(/ +/,"|"));
13
+ $('#result tbody tr').each(function(){
14
+ $(this).toggle($(this).find('td').filter(function(){
15
+ return $(this).text().match(re)?true:false;
16
+ }).length>0);
17
+ });
18
+ });
19
+ $('#button2').on("click",function(){
20
+ $('#result tr').show();
21
+ });
22
+ });
23
+ </script>
24
+ <input type="text" id="search" value=" a b ">
25
+ <input type="button" value="絞り込む" id="button">
26
+ <input type="button" value="すべて表示" id="button2">
27
+
28
+ <table id="result">
29
+ <tbody>
30
+ <tr>
31
+ <td>1</td>
32
+ <td>aaa</td>
33
+ <td>bbb</td>
34
+ </tr>
35
+ <tr>
36
+ <td>2</td>
37
+ <td>aaa</td>
38
+ <td>---</td>
39
+ </tr>
40
+ <tr>
41
+ <td>3</td>
42
+ <td>bbb</td>
43
+ <td>---</td>
44
+ </tr>
45
+ <tr>
46
+ <td>4</td>
47
+ <td>---</td>
48
+ <td>---</td>
49
+ </tr>
50
+ </tbody>
51
+ </table>
52
+ ```