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
回答1件
あなたの回答
tips
プレビュー