前提・実現したいこと
tableをcheckboxを使って絞り込みする方法についてチェックされたときの処理はできましたが
複数チェック時の絞り込み処理がどうしても思いつきません。
理想はチェックするたびに絞り込みされていき、チェックを外すと絞り込みが解除されるものです。
該当のソースコード
html
1<table id="abcd" class="target-area sort"> 2 <tr class="emp_index"> 3 <th class="sort" data-sort="All_emp_name">社員名</th> 4 <th class="sort" data-sort="All_emp_gender">性別</th> 5 <th class="sort" data-sort="All_dept_name">部署</th> 6 </tr> 7 <tbody class="list"> 8 <tr class=""> 9 <td class="All_emp_name">小次郎</td> 10 <td class="All_emp_gender">男性</td> 11 <td class="All_dept_name">1部</td> 12 </tr> 13 <tr class=""> 14 <td class="All_emp_name">太郎</td> 15 <td class="All_emp_gender">女性</td> 16 <td class="All_dept_name">3部</td> 17 </tr> 18 <tr class=""> 19 <td class="All_emp_name">新之助</td> 20 <td class="All_emp_gender">女性</td> 21 <td class="All_dept_name">3部</td> 22 </tr> 23 </tbody> 24</table> 25<div class="search-box"> 26 <span class="search-box_label">性別:</span> 27 <input type="checkbox" name="search_check" value="男性">男性 28 <input type="checkbox" name="search_check" value="女性">女性 29</div> 30 31<div class="search-box"> 32 <span class="search-box_label">部署:</span> 33 <input type="checkbox" name="search_check" value="1部">1部 34 <input type="checkbox" name="search_check" value="2部">2部 35 <input type="checkbox" name="search_check" value="3部">3部 36</div> 37 38<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 39<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> 40<script> 41 $(function () { 42 searchcheck = function(){ 43 // チェックボックスでチェックされた値の取得 44 var searchcheck = $(this).val(), 45 targetText; 46 47 $('.target-area tr').each(function() { 48 targetText = $(this).text(); 49 50 if (targetText.indexOf(searchcheck) != -1) { 51 $(this).removeClass('hidden'); 52 } else { 53 $(this).addClass('hidden'); 54 } 55 }); 56 }; 57 58 // searchcheckの実行 59 $('input[name="search_check"]').change(searchcheck); 60}); 61</script>
css
1.target-area .hidden:not(.emp_index){ 2 display: none 3}
回答1件
あなたの回答
tips
プレビュー