前提
私は、GitHubで以下のサイトを公開している人です。
MHW:IB クエスト表
このサイトでは他カテゴリ間ではAND検索をし、同カテゴリ間ではOR検索をします。
このサイトを作るにあたりHTMLにフィルタ機能を実装するの質問の回答にあった
yambejp様のjavascriptやcssを参考にし作りました。
現状
モンスターを選ぶところのチェックボックスに複数チェック(例としてXとY)するとX OR Yと下にあるTABLEに出力されます。
これはモンスターを選ぶところ以外の種族を選ぶところでも同じように出力されます。
実現したいこと
GitHubで公開しているサイトのモンスターを選ぶところにAND検索とOR検索を選べるラジオボタンを追加導入したいです。
AND検索をラジオボタンで選んだ状態でXとYのチェックボックスにチェックを入れたらX AND Yというように下にあるTABLEに
出力し、OR検索をラジオボタンで選んだ状態でXとYのチェックボックスにチェックを入れたらX OR Yというように下にあるTABLEに
出力したいです。これを種族を選ぶところにも同じようなラジオボタンを追加導入したいです。
該当のソースコード
htmlはコードが長いため省略させていただきます。
javascript
1window.addEventListener('DOMContentLoaded', function(e){ 2 var c=["rank","bet","loc","rui","mon","zok","jou"]; /* ここにクラスを追加する */ 3 [].forEach.call(document.querySelectorAll(c.map(function(x){ 4 return "."+x; 5 }).join(",")),function(x){ 6 x.addEventListener('change',function(e){ 7 var search={}; 8 c.forEach(function(x){ 9 search[x]=[].map.call(document.querySelectorAll('[type=checkbox].'+x+':checked'),function(x){ 10 return x.value; 11 }); 12 }); 13 var len={}; 14 var reg={}; 15 Object.keys(search).forEach(function(x){ 16 len[x]=search[x].length; 17 reg[x]=new RegExp(search[x].join("|")); 18 }); 19 [].forEach.call(document.querySelectorAll('#t1 tbody tr'),function(x){ 20 var flg=c.map(function(y){ 21 if(len[y]==0) return true; 22 return x.querySelector('td.'+y).textContent.match(reg[y])?true:false; 23 }).filter(function(y){ 24 return !y; 25 }).length>0; 26 flg?x.classList.add("hide"):x.classList.remove("hide"); 27 }); 28 }); 29 }); 30 });
css
1#sampleTable th {border : 1px solid #666;} 2#sampleTable td {border : 1px solid #666;} 3.hide {display: none;} 4td.mon{display: none;} 5td.zok{display: none;} 6td.jou{display: none;} 7 8body.nc{ 9 font-size: 10px; 10 -webkit-user-select: none; 11 -moz-user-select: none; 12 -ms-user-select: none; 13 user-select: none; 14} 15 16span.del{ 17 text-decoration-line: line-through; 18 text-decoration-color: red; 19}
最後に
何卒皆様方のお力を貸していただけないでしょうか。お願いします。