Q&A
「変換ではなく1から組みなおす」ということは検討されませんでしたか？
jqueryを使用できない環境なので、
以下の、jqueryで書かれたコードをjavascriptコードに置換したいのですが、
思うようにいきません。
以下のjqueryコードを、
javascriptに変換するとなると、どんな感じになりますでしょうか？
【追記１】
下記jqueryでも、列１と列２を含めたキーワードだとやはりうまくヒットしませんね・・・。
【追記2】
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1"> 6 7<title></title> 8 9</head> 10 11<body> 12 <input type="text" id="search"> <input type="button" value="絞り込む" id="button"> <input type="button" value="すべて表示" id="button2"> 13<style> 14 td{ 15 padding:5px; 16 } 17 </style> 18 <p id="kekka" style="display:none;height:50px;width:300px;text-align:center;"> 19 </p> 20 <table id="result" style="border-spacing:0;"> 21 <thead> 22 23 24 <tr><th>列１</th><th>列２</th><th>列3</th><th>列4</th></tr> 25 </thead> 26 27 28 <tbody> 29 <tr> 30 <td>データ１</td> 31 <td>データ２</td> 32 <td>data1</td><td>data2</td> 33 </tr> 34 <tr> 35 <td>データ１１</td> 36 <td>データ２２</td> 37 <td>data1</td><td>data2</td> 38 </tr> 39 <tr> 40 <td>データ１２１</td> 41 <td>データ２１２</td> 42 <td>data1</td><td>data2</td> 43 </tr> 44 <tr> 45 <td>データ１２１</td> 46 <td>データ２１２</td> 47 <td>data1</td><td>data2</td> 48 </tr> 49 <tr> 50 <td>データ１２１</td> 51 <td>データ２１２</td> 52 <td>data1</td><td>data2</td> 53 </tr> 54 <tr> 55 <td>データ２２２</td> 56 <td>データ２１２</td> 57 <td>data1</td><td>data2</td> 58 </tr> 59 <tr> 60 <td>データ３２１</td> 61 <td>データ２１２</td> 62 <td>data1</td><td>data2</td> 63 </tr> 64 <tr> 65 <td>データ４２１</td> 66 <td>データ２１２</td> 67 <td>data1</td><td>data2</td> 68 </tr> 69 <tr> 70 <td>データ５２１</td> 71 <td>データ２１２</td> 72 <td>data1</td><td>data2</td> 73 </tr> 74 <tr> 75 <td>データ６２１</td> 76 <td>データ２１２</td> 77 <td>data1</td><td>data2</td> 78 </tr> 79 80 </tbody> 81 </table> 82 83 84 85<script> 86 var btn = document.getElementById('button'); 87 var btn2 = document.getElementById('button2'); 88 var result = document.getElementById('result'); 89 var kekka = document.getElementById('kekka'); 90 91 btn.addEventListener('click', function() { 92 var search = document.getElementById('search').value; 93 var data_count=0; 94 95 for(var r=1;r<result.rows.length;r++){ 96 for(var c=0;c<result.rows[r].cells.length;c++){ 97 if(c==2 || c==3){ 98 }else{ 99 var re = new RegExp(search); 100 var hit = result.rows[r].cells[c].firstChild.data; 101 var resu = hit.match(re); 102 if(search==""){ 103 }else{ 104 if(resu){ 105 result.rows[r].style.backgroundColor = 'red'; 106 result.rows[r].style.display = "table-row"; 107 data_count++; 108 break; 109 }else{ 110 result.rows[r].style.display = "none"; 111 } 112 } 113 } 114 } 115 } 116 if(data_count){ 117 kekka.style.display="block"; 118 kekka.innerText=data_count+'件データがありました。'; 119 }else{ 120 for(var r=1;r<result.rows.length;r++){ 121 for(var c=0;c<result.rows[r].cells.length;c++){ 122 result.rows[r].style.backgroundColor = 'transparent'; 123 result.rows[r].style.display = "table-row"; 124 kekka.style.display="block"; 125 kekka.innerText="データがありませんでした。"; 126 } 127 } 128 } 129 }, false); 130 131 btn2.addEventListener('click', function() { 132 133 for(var r=1;r<result.rows.length;r++){ 134 for(var c=0;c<result.rows[r].cells.length;c++){ 135 result.rows[r].style.backgroundColor = 'transparent'; 136 result.rows[r].style.display = "table-row"; 137 kekka.style.display="none"; 138 } 139 } 140 }, false); 141 142</script> 143 144</body> 145</html> 146 147 148 149 150 151 152 153 154 155
[元jqueryデータ]
jquery
1$(function(){ 2 $('#button').bind("click",function(){ 3 var re = new RegExp($('#search').val()); 4 $('#result tbody tr').each(function(){ 5 var txt = $(this).find("td:eq(0)").html(); 6 var txt2 = $(this).find("td:eq(1)").html(); 7 8 9 if(txt.match(re) == null && txt2.match(re) == null){ 10 $(this).css('color', 'black'); 11 12 }else{ 13 $(this).css('color', 'Red'); 14 } 15 }); 16 }); 17 18 $('#button2').bind("click",function(){ 19 $('#search').val(''); 20 $('#result tr').css('color', 'transparent'); 21 }); 22}); 23
【─────イメージ──────】
[サーチ窓(id:search)] [検索（id:button1）] [クリア(id:button2)]
| 列1 | 列2 | 列3(検索対象外) | 列4(検索対象外) |
|---|---|---|---|
| データ1 | データ２ | データ３ | データ4 |
| データ1 | データ２ | データ３ | データ4 |
| データ1 | データ２ | データ３ | データ4 |
| データ1 | データ２ | データ３ | データ4 |
| データ1 | データ２ | データ３ | データ4 |
| データ1 | データ２ | データ３ | データ4 |
上記のjqueryコードの置換が理想なのですが、自分ではわかりませんでしたので、
自分なりにjavascript部分をつくったのが以下です。
ただ、列１だけのキーワードサーチ（例：データ１）、列２だけのキーワードサーチ（例：データ２）だとうまく作動したのですが、
列１と列２の組み合わせでのキーワードでサーチ（例：データ１データ２のような）すると、
検索結果にヒットしないので、悩んでます。
javascript
1var btn = document.getElementById('button'); 2var btn2 = document.getElementById('button2'); 3var result = document.getElementById('result'); 4var kekka = document.getElementById('kekka'); 5 6btn.addEventListener('click', function() { 7 var search = document.getElementById('search').value; 8 var data_count=0; 9 10 11 for(var r=1;r<result.rows.length;r++){ 12 for(var c=0;c<result.rows[r].cells.length;c++){ 13 if(c==2 || c==3){ 14 }else{ 15 16 var re = new RegExp(search); 17 18 var hit = result.rows[r].cells[c].firstChild.data; 19 20 var resu = hit.match(re); 21 if(search==""){ 22 23 }else{ 24 if(resu){ 25 26 27 result.rows[r].style.backgroundColor = 'red'; 28 result.rows[r].style.display = "table-row"; 29 30 data_count++; 31 32 break; 33 }else{ 34 35 result.rows[r].style.display = "none"; 36 37 38 } 39 40 41 } 42 43 } 44 } 45 46 } 47 if(data_count){ 48 kekka.style.display="block"; 49 kekka.innerText=data_count+'件データがありました。'; 50 51 }else{ 52 53 for(var r=1;r<result.rows.length;r++){ 54 for(var c=0;c<result.rows[r].cells.length;c++){ 55 56 result.rows[r].style.backgroundColor = 'transparent'; 57 result.rows[r].style.display = "table-row"; 58 kekka.style.display="block"; 59 kekka.innerText="データがありませんでした。"; 60 61 } 62 } 63 } 64 65 }, false); 66 67 68 btn2.addEventListener('click', function() { 69 70 for(var r=1;r<result.rows.length;r++){ 71 for(var c=0;c<result.rows[r].cells.length;c++){ 72 73 result.rows[r].style.backgroundColor = 'transparent'; 74 result.rows[r].style.display = "table-row"; 75 kekka.style.display="none"; 76 77 78 } 79 } 80 81 82 }, false); 83
ただ、result.rowsがいきなり現れてるのでこれがどう定義しているのか分からないのでなんとも。
デバッグして意図しない動作をしている個所に絞って質問してくれたら回答するかもしれません
お返事ありがとうございます。
jqueryの変換がうまくいきませんでしたので、
１から組んだコードが下のjavascriptのコードになります。
ただ調べながらなので、無駄なコードや、変な記述が多数あるかと思います・・・
ご指摘ありがとうございます！
ご指摘頂いた通り、定義の部分のコードをコピーできていませんでした。
var btn = document.getElementById('button');
var btn2 = document.getElementById('button2');
var result = document.getElementById('result');
var cell = result.querySelectorAll('td');
var kekka = document.getElementById('kekka');
が抜けてました。
var cell = result.querySelectorAll('td');
は、いりませんね。
色々試しながらなので、消し忘れてました＾＾；
htmlの提示が必要です。
最低限テーブル、検索窓、ボタン２つはないと始まりません
ご指摘ありがとうございます。
html掲載いたしました。
ご指摘ありがとうございます。
デバックして今把握しているところとしては、
列１と列２のキーワードを組み合した場合、検索結果として拾ってくれないことです。
うまくいかないので、やはりjqueryでの置換を考え直していたところでした。
ただ、jqueryの方も列１と列２のキーワードを組み合わせた場合、うまく検索結果として拾ってくれませんね・・・
組み合わせた場合→組み合わせて検索した場合
例：「データ１データ２」のように検索
回答2件
0
とりあえずこんな感じで
投稿2020/09/14 08:25
総合スコア115010
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelector('#button').addEventListener('click',()=>{
const re = new RegExp(document.querySelector('#search').value);
const td=[...document.querySelectorAll('#result td')];
td.forEach(x=>{
x.closest('tr').style.color="";
})
td.filter(x=>re.test(x.textContent)).forEach(x=>{
x.closest('tr').style.color="red";
});
});
});
button2はもともとバグってるっぽいので何をしたいかわかりません
ご回答ありがとうございます。
button2確かにバグっていますね。
こういった記述の仕方もあるのですね！
今の自分にはまだ理解ができませんが、１つ１つ調べていこうと思います。
ありがとうございます！
0
ベストアンサー
答えだけ言うとこんな感じですかね。だいたい各行がjqueryと1対1で対応してます。
javascript
1document.addEventListener("DOMContentLoaded", () => { 2 document.querySelector("#button").addEventListener("click", ()=>{ 3 var re = new RegExp(document.querySelector('#search').value); 4 document.querySelectorAll('#result tbody tr').forEach(el => { 5 var txt = el.querySelectorAll("td")[0].innerHTML; 6 var txt2 = el.querySelectorAll("td")[1].innerHTML; 7 8 if(txt.match(re) == null && txt2.match(re) == null){ 9 el.style.color = "black"; 10 }else{ 11 el.style.color = "Red"; 12 } 13 }); 14 }); 15 16 document.querySelector("#button2").addEventListener("click", ()=>{ 17 document.querySelector('#search').value = ''; 18 document.querySelectorAll('#result tr').forEach(el => el.style.color = "transparent"); 19 }); 20});
投稿2020/09/14 08:30
編集2020/09/14 08:33
総合スコア4524
ご回答ありがとうございます！
jqueryからjavascriptを変換するとこのような形になるのですね。
１対１で対応しているとのことで、今の自分にはとても理解しやすいです。
ありがとうございます！
あなたの回答
tips
プレビュー
