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

td2とtd3を組み合わせたキーワードでも検索にかかるようにしたいです。
例１：地域AてすとCCC
例２：地域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>列１</th><th>列２</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

Hogeike

2020/09/25 02:05

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

Miii

2020/09/25 04:56

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

Hogeike

2020/09/25 05:33

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

Miii

2020/09/25 06:10

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

Hogeike

2020/09/25 06:47

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

Miii

2020/09/27 05:24

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

行動規範の内容に同意します

回答1件

ベストアンサー

[地域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