こんな感じじゃないでしょうかね
- 同じカテゴリ内はor検索
- 別のカテゴリとの間はand検索
javascript
1<style>
2.hide{display:none;}
3</style>
4<script>
5window.addEventListener('DOMContentLoaded', function(e){
6 var c=["color","kind"];
7 [].forEach.call(document.querySelectorAll(c.map(function(x){
8 return "."+x;
9 }).join(",")),function(x){
10 x.addEventListener('change',function(e){
11 var search={};
12 c.forEach(function(x){
13 search[x]=[].map.call(document.querySelectorAll('[type=checkbox].'+x+':checked'),function(x){
14 return x.value;
15 });
16 });
17 var len={};
18 var reg={};
19 Object.keys(search).forEach(function(x){
20 len[x]=search[x].length;
21 reg[x]=new RegExp(search[x].join("|"));
22 });
23 [].forEach.call(document.querySelectorAll('#t1 tbody tr'),function(x){
24 var flg=c.map(function(y){
25 if(len[y]==0) return true;
26 return x.querySelector('td.'+y).textContent.match(reg[y])?true:false;
27 }).filter(function(y){
28 return !y;
29 }).length>0;
30 flg?x.classList.add("hide"):x.classList.remove("hide");
31 });
32 });
33 });
34});
35</script>
36<div>色:
37<label><input type="checkbox" value="オレンジ" class="color">オレンジ</label>
38<label><input type="checkbox" value="赤" class="color">赤</label>
39</div>
40<div>種類:
41<label><input type="checkbox" value="果物" class="kind">果物</label>
42<label><input type="checkbox" value="野菜" class="kind">野菜</label>
43</div>
44<table id="t1">
45<thead>
46<tr>
47<th>名前</th>
48<th>色</th>
49<th>種類</th>
50</tr>
51</thead>
52<tbody>
53<tr>
54<td>みかん</td>
55<td class="color">オレンジ</td>
56<td class="kind">果物</td>
57</tr>
58<tr>
59<td>りんご</td>
60<td class="color">赤</td>
61<td class="kind">果物</td>
62</tr>
63<tr>
64<td>にんじん</td>
65<td class="color">オレンジ</td>
66<td class="kind">野菜</td>
67</tr>
68</tbody>
69</table>
3つ以上拡張
部分一致なので、複数季節をかいてもヒットする
javascript<style>
1.hide{display:none;}
2</style>
3<script>
4window.addEventListener('DOMContentLoaded', function(e){
5 var c=["color","kind","season"]; /* ここにクラスを追加する */
6 [].forEach.call(document.querySelectorAll(c.map(function(x){
7 return "."+x;
8 }).join(",")),function(x){
9 x.addEventListener('change',function(e){
10 var search={};
11 c.forEach(function(x){
12 search[x]=[].map.call(document.querySelectorAll('[type=checkbox].'+x+':checked'),function(x){
13 return x.value;
14 });
15 });
16 var len={};
17 var reg={};
18 Object.keys(search).forEach(function(x){
19 len[x]=search[x].length;
20 reg[x]=new RegExp(search[x].join("|"));
21 });
22 [].forEach.call(document.querySelectorAll('#t1 tbody tr'),function(x){
23 var flg=c.map(function(y){
24 if(len[y]==0) return true;
25 return x.querySelector('td.'+y).textContent.match(reg[y])?true:false;
26 }).filter(function(y){
27 return !y;
28 }).length>0;
29 flg?x.classList.add("hide"):x.classList.remove("hide");
30 });
31 });
32 });
33});
34</script>
35<div>色:
36<label><input type="checkbox" value="オレンジ" class="color">オレンジ</label>
37<label><input type="checkbox" value="赤" class="color">赤</label>
38</div>
39<div>種類:
40<label><input type="checkbox" value="果物" class="kind">果物</label>
41<label><input type="checkbox" value="野菜" class="kind">野菜</label>
42</div>
43<div>旬:
44<label><input type="checkbox" value="春" class="season">春</label>
45<label><input type="checkbox" value="夏" class="season">夏</label>
46<label><input type="checkbox" value="秋" class="season">秋</label>
47<label><input type="checkbox" value="冬" class="season">冬</label>
48</div>
49<table id="t1">
50<thead>
51<tr>
52<th>名前</th>
53<th>色</th>
54<th>種類</th>
55</tr>
56</thead>
57<tbody>
58<tr>
59<td>みかん</td>
60<td class="color">オレンジ</td>
61<td class="kind">果物</td>
62<td class="season">冬</td>
63</tr>
64<tr>
65<td>りんご</td>
66<td class="color">赤</td>
67<td class="kind">果物</td>
68<td class="season">秋・冬</td>
69</tr>
70<tr>
71<td>にんじん</td>
72<td class="color">オレンジ</td>
73<td class="kind">野菜</td>
74<td class="season">冬・春</td>
75</tr>
76</tbody>
77</table>
特定の列を表示しない
ちょうどhideクラスを作ってあるので、それをthやtdに指定してやる
場合によってはnth-childなどで指定してもいいが構造が変わるとずれるので微妙
HTML
1<table id="t1">
2<thead>
3<tr>
4<th>名前</th>
5<th>色</th>
6<th>種類</th>
7<th class="hide">旬</th>
8</tr>
9</thead>
10<tbody>
11<tr>
12<td>みかん</td>
13<td class="color">オレンジ</td>
14<td class="kind">果物</td>
15<td class="season hide">冬</td>
16</tr>
17<tr>
18<td>りんご</td>
19<td class="color">赤</td>
20<td class="kind">果物</td>
21<td class="season hide">秋・冬</td>
22</tr>
23<tr>
24<td>にんじん</td>
25<td class="color">オレンジ</td>
26<td class="kind">野菜</td>
27<td class="season hide">冬・春</td>
28</tr>
29</tbody>
30</table>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/07 04:06
2018/12/07 04:08
2018/12/07 04:15 編集
2018/12/07 04:55
2018/12/07 05:07
2018/12/07 05:12