jquery→javascriptの置換

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

m.ts10806

2020/09/14 07:39

「変換ではなく1から組みなおす」ということは検討されませんでしたか？

m.ts10806

2020/09/14 07:41

ただ、result.rowsがいきなり現れてるのでこれがどう定義しているのか分からないのでなんとも。

hentaiman

2020/09/14 07:46

デバッグして意図しない動作をしている個所に絞って質問してくれたら回答するかもしれません

Miii

2020/09/14 07:47

お返事ありがとうございます。 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'); が抜けてました。

Miii

2020/09/14 07:48

var cell = result.querySelectorAll('td'); は、いりませんね。色々試しながらなので、消し忘れてました＾＾；

yambejp

2020/09/14 07:49

htmlの提示が必要です。最低限テーブル、検索窓、ボタン２つはないと始まりません

Miii

2020/09/14 07:59

ご指摘ありがとうございます。 html掲載いたしました。

Miii

2020/09/14 08:01

ご指摘ありがとうございます。デバックして今把握しているところとしては、列１と列２のキーワードを組み合した場合、検索結果として拾ってくれないことです。うまくいかないので、やはりjqueryでの置換を考え直していたところでした。ただ、jqueryの方も列１と列２のキーワードを組み合わせた場合、うまく検索結果として拾ってくれませんね・・・

Miii

2020/09/14 08:09 編集

組み合わせた場合→組み合わせて検索した場合例：「データ１データ２」のように検索

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

回答2件

とりあえずこんな感じで

投稿2020/09/14 08:25

yambejp

総合スコア116724

yambejp

2020/09/14 08:25

yambejp

2020/09/14 08:26

button2はもともとバグってるっぽいので何をしたいかわかりません

Miii

2020/09/14 11:23

ご回答ありがとうございます。 button2確かにバグっていますね。こういった記述の仕方もあるのですね！今の自分にはまだ理解ができませんが、１つ１つ調べていこうと思います。ありがとうございます！

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

ベストアンサー

答えだけ言うとこんな感じですかね。だいたい各行が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});