質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
フィルタ

フィルタとは、特定の条件に合わせてデータへのアクセスをブロックするプログラムやルーチンを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

774閲覧

HTMLのTABLEにAND検索とOR検索機能を実装したい

xyzdash

総合スコア0

フィルタ

フィルタとは、特定の条件に合わせてデータへのアクセスをブロックするプログラムやルーチンを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2022/09/05 05:50

編集2022/09/06 11:35

前提

私は、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}

最後に

何卒皆様方のお力を貸していただけないでしょうか。お願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2022/09/05 06:04

何が問題になっているかを明確にしましょう。 【質問するときのヒント ー teratail【テラテイル】|ITエンジニア特化型Q&Aサイト】 https://teratail.com/help/question-tips
guest

回答1

0

こういう感じでしょうか。

投稿2022/09/05 09:32

arcxor

総合スコア2859

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問