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

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

新規登録して質問してみよう
ただいま回答率
85.35%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

1回答

1176閲覧

td2とtd3の合わせたキーワードでも検索にかかるようにしたい。

MiiiRiyu

総合スコア30

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

1クリップ

投稿2020/09/24 05:56

編集2020/09/24 06:03

td2とtd3を組み合わせたキーワードでも検索にかかるようにしたいです。
例1:地域AてすとCCC
例2:地域CてすとG
現状、片方のキーワードでしか検索にかかりません。

【追記】
先ほど、検索にかかる方法を見つけました。
labelをdisplay:none;で非表示にして、
そのラベルの中に「地域AてすとCCC」とすると検索にかかるようになりましたが、
スクリプトで検索にかかる方法はありますか?

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="robots" content="noindex,nofollow"> 6 7 <!-- ビューポートの設定 --> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9 10 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 11 12 <title>デモ</title> 13 14 </head> 15<body> 16 <form name="childfrm" action="" method="post"> 17 <input type="button" onclick="setFormInput()" value="値を渡す"> 18 </form> 19 <input type="text" id="search"> <input type="button" value="絞り込む" id="button"> <input type="button" value="すべて表示" id="button2"> 20 <style> 21 td{ 22 padding:5px; 23 } 24 </style> 25 <p id="kekka" style="display:none;height:50px;width:300px;text-align:center;"> 26 </p> 27 <table id="result" style="border-spacing:0;"> 28 <thead> 29 30 31 <tr><th>✔️</th><th>列1</th><th>列2</th><th>列3</th><th>列4</th></tr> 32 </thead> 33 34 35 <tbody> 36 <tr> 37 <td><input type="radio" name="hoge" class="hoge" value="1" /></td> 38 39 <td>地域A</td> 40 <td>てすとCCC</td> 41 <td>300</td><td>1300</td> 42 </tr> 43 <tr> 44 <td><input type="radio" name="hoge" class="hoge" value="1" /></td> 45 <td>地域A</td> 46 <td>てすとBBA</td> 47 <td>400</td><td>500</td> 48 </tr> 49 <tr> 50 <td><input type="radio" name="hoge" class="hoge" value="1" /></td> 51 <td>地域A</td> 52 <td>てすとAA</td> 53 <td>1000</td><td>2000</td> 54 </tr> 55 <tr> 56 <td><input type="radio" name="hoge" class="hoge" value="1" /></td> 57 <td>地域A</td> 58 <td>てすとD</td> 59 <td>2000</td><td>1000</td> 60 </tr> 61 <tr> 62 <td><input type="radio" name="hoge" class="hoge" value="1" /></td> 63 <td>地域B</td> 64 <td>てすとC</td> 65 <td>1000</td><td>2000</td> 66 </tr> 67 <tr> 68 <td><input type="radio" name="hoge" class="hoge" value="1" /></td> 69 <td>地域B</td> 70 <td>てすとA</td> 71 <td>1000</td><td>13000</td> 72 </tr> 73 <tr> 74 <td><input type="radio" name="hoge" class="hoge" value="1" /></td> 75 <td>地域C</td> 76 <td>てすとB</td> 77 <td>115</td><td>600</td> 78 </tr> 79 <tr> 80 <td><input type="radio" name="hoge" class="hoge" value="1" /></td> 81 <td>地域C</td> 82 <td>てすとE</td> 83 <td>300</td><td>400</td> 84 </tr> 85 <tr> 86 <td><input type="radio" name="hoge" class="hoge" value="1" /></td> 87 <td>地域C</td> 88 <td>てすとF</td> 89 <td>100</td><td>200</td> 90 </tr> 91 <tr> 92 <td><input type="radio" name="hoge" class="hoge" value="1" /></td> 93 <td>地域C</td> 94 <td>てすとG</td> 95 <td>130</td><td>250</td> 96 </tr> <tr> 97 <td><input type="radio" name="hoge" class="hoge" value="1" /></td> 98 <td>地域C</td> 99 <td>てすとF</td> 100 <td>100</td><td>200</td> 101 </tr> 102 <tr> 103 <td><input type="radio" name="hoge" class="hoge" value="1" /></td> 104 <td>地域C</td> 105 <td>てすとG</td> 106 <td>130</td><td>250</td> 107 </tr> 108 <tr> 109 <td><input type="radio" name="hoge" class="hoge" value="1" /></td> 110 <td>地域A</td> 111 <td>てすとD</td> 112 <td>2000</td><td>1000</td> 113 </tr> 114 <tr> 115 <td><input type="radio" name="hoge" class="hoge" value="1" /></td> 116 <td>地域B</td> 117 <td>てすとC</td> 118 <td>1000</td><td>2000</td> 119 </tr> 120 <tr> 121 <td><input type="radio" name="hoge" class="hoge" value="1" /></td> 122 <td>地域B</td> 123 <td>てすとA</td> 124 <td>1000</td><td>13000</td> 125 </tr> 126 <tr> 127 <td><input type="radio" name="hoge" class="hoge" value="1" /></td> 128 <td>地域C</td> 129 <td>てすとB</td> 130 <td>115</td><td>600</td> 131 </tr> 132 <tr> 133 <td><input type="radio" name="hoge" class="hoge" value="1" /></td> 134 <td>地域C</td> 135 <td>てすとE</td> 136 <td>300</td><td>400</td> 137 </tr> 138 <tr> 139 </tbody> 140 </table> 141 142 143 <script> 144 document.addEventListener("DOMContentLoaded", () => { 145 document.querySelector("#button").addEventListener("click", ()=>{ 146 var re = new RegExp(document.querySelector('#search').value); 147 document.querySelectorAll('#result tbody tr').forEach(el => { 148 var txt = el.querySelectorAll("td")[1].innerHTML; 149 var txt2 = el.querySelectorAll("td")[2].innerHTML; 150 151 if(txt.match(re) == null && txt2.match(re) == null){ 152 el.style.color = "black"; 153 }else{ 154 el.style.color = "Red"; 155 } 156 }); 157 }); 158 159 document.querySelector("#button2").addEventListener("click", ()=>{ 160 document.querySelector('#search').value = ''; 161 document.querySelectorAll('#result tr').forEach(el => el.style.color = "black"); 162 }); 163}); 164 165 </script> 166 167 168 169</body> 170</html> 171

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

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

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

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

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

Hogeike

2020/09/25 02:05

そのコードをコピペで実行したところ、Cで検索したら列1か列2にCを含む文字列があるものが赤くなりました。 これで出来ているように見えるのですが、なにが問題なのですか? 例のところもわかりづらく、回答者側から見て、あなたの課題がよくわかりません。
MiiiRiyu

2020/09/25 04:56

お返事ありがとうございます! 現状のコードでは、「地域A」でひっかかる、「てすとCCC」でひっかかるのですが、 例えば、「地域AてすとCCC」で検索をかけても、赤くなるようにしたいです。 つまり、td2とtd3のデータを組み合した場合もひっかかるようにしたい。
Hogeike

2020/09/25 05:33

なるほどよくわかりました。 ですがその場合、せめて「地域A」と「てすとCCC」が何らかのルールで区切られていなければ無理だと思います。 (例:半角スペースで区切る、カンマで区切る) そうしないと、「CCC」で「てすとC」も「てすとCCC」もヒットしてしまいます 半角スペースで区切っても大丈夫ですか?
MiiiRiyu

2020/09/25 06:10

ありがとうございます!そうなのですね!半角スペースで区切ると大丈夫なのですね。半角スペースで区切って大丈夫です!
Hogeike

2020/09/25 06:47

半角スペースで区切ると大丈夫というか、半角スペースで区切ることで、split()で単語の区切りを決めることができます。 "地域A てすとCCC".split(' ') ⇒ ["地域A", "てすとCCC"]
MiiiRiyu

2020/09/27 05:24

ありがとうございます! あれから、jsonデータからテーブルを作成するようになり少し変わってしまいましたが、データを扱う上でsplitで区切ることが増えてくると思うので教えて頂いた方法の半角スペースで区切る方法を活用していきたいと思います!ありがとうございます!
guest

回答1

0

ベストアンサー

[地域B てすとC]のような時、

両方を満たすものを赤くする場合

javascript

1document.querySelector("#button").addEventListener("click", () => { 2 const searchWords = document 3 .querySelector("#search") 4 .value.split(" "); 5 const regexpList = searchWords.map((word) => new RegExp(word)); 6 document.querySelectorAll("#result tbody tr").forEach((el) => { 7 const col1Value = el.querySelectorAll("td")[1]?.innerHTML; 8 const col2Value = el.querySelectorAll("td")[2]?.innerHTML; 9 if (col1Value && col2Value) { 10 const isMatched = regexpList 11 .map( 12 (regexp) => 13 col1Value.match(regexp) === null && 14 col2Value.match(regexp) === null 15 ) 16 .every(ret => ret === false); 17 if (isMatched) { 18 el.style.color = "Red"; 19 } else { 20 el.style.color = "black"; 21 } 22 } 23 }); 24});

どちらかを満たすものを赤くする場合

javascript

1document.querySelector("#button").addEventListener("click", () => { 2 const searchWords = document 3 .querySelector("#search") 4 .value.split(" "); 5 const regexpList = searchWords.map((word) => new RegExp(word)); 6 document.querySelectorAll("#result tbody tr").forEach((el) => { 7 const col1Value = el.querySelectorAll("td")[1]?.innerHTML; 8 const col2Value = el.querySelectorAll("td")[2]?.innerHTML; 9 if (col1Value && col2Value) { 10 const isMatched = regexpList 11 .map( 12 (regexp) => 13 col1Value.match(regexp) === null && 14 col2Value.match(regexp) === null 15 ) 16 .includes(false); 17 if (isMatched) { 18 el.style.color = "Red"; 19 } else { 20 el.style.color = "black"; 21 } 22 } 23 }); 24}); 25

投稿2020/09/25 06:45

Hogeike

総合スコア293

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

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

MiiiRiyu

2020/09/27 05:29

ご親切に回答いただきありがとうございます!わかりやすく書いてくださり嬉しいです!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問