teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問jquery→javascriptの置換

編集履歴

質問編集履歴

4

追記

2020/09/14 08:08

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -12,12 +12,14 @@
12
12
 
13
13
 
14
14
 
15
- [追記]
15
+ 【追記１】
16
16
 
17
17
  下記jqueryでも、列１と列２を含めたキーワードだとやはりうまくヒットしませんね・・・。
18
18
 
19
19
 
20
20
 
21
+ 【追記2】
22
+
21
23
  ```html
22
24
 
23
25
  <!DOCTYPE html>

3

html追記

2020/09/14 08:08

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -18,6 +18,320 @@
18
18
 
19
19
 
20
20
 
21
+ ```html
22
+
23
+ <!DOCTYPE html>
24
+
25
+ <html lang="ja">
26
+
27
+ <head>
28
+
29
+ <meta charset="utf-8">
30
+
31
+ <meta name="viewport" content="width=device-width, initial-scale=1">
32
+
33
+
34
+
35
+ <title></title>
36
+
37
+
38
+
39
+ </head>
40
+
41
+
42
+
43
+ <body>
44
+
45
+ <input type="text" id="search"> <input type="button" value="絞り込む" id="button"> <input type="button" value="すべて表示" id="button2">
46
+
47
+ <style>
48
+
49
+ td{
50
+
51
+ padding:5px;
52
+
53
+ }
54
+
55
+ </style>
56
+
57
+ <p id="kekka" style="display:none;height:50px;width:300px;text-align:center;">
58
+
59
+ </p>
60
+
61
+ <table id="result" style="border-spacing:0;">
62
+
63
+ <thead>
64
+
65
+
66
+
67
+
68
+
69
+ <tr><th>列１</th><th>列２</th><th>列3</th><th>列4</th></tr>
70
+
71
+ </thead>
72
+
73
+
74
+
75
+
76
+
77
+ <tbody>
78
+
79
+ <tr>
80
+
81
+ <td>データ１</td>
82
+
83
+ <td>データ２</td>
84
+
85
+ <td>data1</td><td>data2</td>
86
+
87
+ </tr>
88
+
89
+ <tr>
90
+
91
+ <td>データ１１</td>
92
+
93
+ <td>データ２２</td>
94
+
95
+ <td>data1</td><td>data2</td>
96
+
97
+ </tr>
98
+
99
+ <tr>
100
+
101
+ <td>データ１２１</td>
102
+
103
+ <td>データ２１２</td>
104
+
105
+ <td>data1</td><td>data2</td>
106
+
107
+ </tr>
108
+
109
+ <tr>
110
+
111
+ <td>データ１２１</td>
112
+
113
+ <td>データ２１２</td>
114
+
115
+ <td>data1</td><td>data2</td>
116
+
117
+ </tr>
118
+
119
+ <tr>
120
+
121
+ <td>データ１２１</td>
122
+
123
+ <td>データ２１２</td>
124
+
125
+ <td>data1</td><td>data2</td>
126
+
127
+ </tr>
128
+
129
+ <tr>
130
+
131
+ <td>データ２２２</td>
132
+
133
+ <td>データ２１２</td>
134
+
135
+ <td>data1</td><td>data2</td>
136
+
137
+ </tr>
138
+
139
+ <tr>
140
+
141
+ <td>データ３２１</td>
142
+
143
+ <td>データ２１２</td>
144
+
145
+ <td>data1</td><td>data2</td>
146
+
147
+ </tr>
148
+
149
+ <tr>
150
+
151
+ <td>データ４２１</td>
152
+
153
+ <td>データ２１２</td>
154
+
155
+ <td>data1</td><td>data2</td>
156
+
157
+ </tr>
158
+
159
+ <tr>
160
+
161
+ <td>データ５２１</td>
162
+
163
+ <td>データ２１２</td>
164
+
165
+ <td>data1</td><td>data2</td>
166
+
167
+ </tr>
168
+
169
+ <tr>
170
+
171
+ <td>データ６２１</td>
172
+
173
+ <td>データ２１２</td>
174
+
175
+ <td>data1</td><td>data2</td>
176
+
177
+ </tr>
178
+
179
+
180
+
181
+ </tbody>
182
+
183
+ </table>
184
+
185
+
186
+
187
+
188
+
189
+
190
+
191
+ <script>
192
+
193
+ var btn = document.getElementById('button');
194
+
195
+ var btn2 = document.getElementById('button2');
196
+
197
+ var result = document.getElementById('result');
198
+
199
+ var kekka = document.getElementById('kekka');
200
+
201
+
202
+
203
+ btn.addEventListener('click', function() {
204
+
205
+ var search = document.getElementById('search').value;
206
+
207
+ var data_count=0;
208
+
209
+
210
+
211
+ for(var r=1;r<result.rows.length;r++){
212
+
213
+ for(var c=0;c<result.rows[r].cells.length;c++){
214
+
215
+ if(c==2 || c==3){　
216
+
217
+ }else{
218
+
219
+ var re = new RegExp(search);
220
+
221
+ var hit = result.rows[r].cells[c].firstChild.data;
222
+
223
+ var resu = hit.match(re);
224
+
225
+ if(search==""){
226
+
227
+ }else{
228
+
229
+ if(resu){
230
+
231
+ result.rows[r].style.backgroundColor = 'red';
232
+
233
+ result.rows[r].style.display = "table-row";
234
+
235
+ data_count++;
236
+
237
+ break;
238
+
239
+ }else{
240
+
241
+ result.rows[r].style.display = "none";
242
+
243
+ }
244
+
245
+ }
246
+
247
+ }
248
+
249
+ }
250
+
251
+ }
252
+
253
+ if(data_count){
254
+
255
+ kekka.style.display="block";
256
+
257
+ kekka.innerText=data_count+'件データがありました。';
258
+
259
+ }else{
260
+
261
+ for(var r=1;r<result.rows.length;r++){
262
+
263
+ for(var c=0;c<result.rows[r].cells.length;c++){
264
+
265
+ result.rows[r].style.backgroundColor = 'transparent';
266
+
267
+ result.rows[r].style.display = "table-row";
268
+
269
+ kekka.style.display="block";
270
+
271
+ kekka.innerText="データがありませんでした。";
272
+
273
+ }
274
+
275
+ }
276
+
277
+ }
278
+
279
+ }, false);
280
+
281
+
282
+
283
+ btn2.addEventListener('click', function() {
284
+
285
+
286
+
287
+ for(var r=1;r<result.rows.length;r++){
288
+
289
+ for(var c=0;c<result.rows[r].cells.length;c++){
290
+
291
+ result.rows[r].style.backgroundColor = 'transparent';
292
+
293
+ result.rows[r].style.display = "table-row";
294
+
295
+ kekka.style.display="none";
296
+
297
+ }
298
+
299
+ }
300
+
301
+ }, false);
302
+
303
+
304
+
305
+ </script>
306
+
307
+
308
+
309
+ </body>
310
+
311
+ </html>
312
+
313
+
314
+
315
+
316
+
317
+
318
+
319
+
320
+
321
+
322
+
323
+
324
+
325
+
326
+
327
+
328
+
329
+
330
+
331
+
332
+
333
+ ```
334
+
21
335
 
22
336
 
23
337
  [元jqueryデータ]

2

定義部分

2020/09/14 07:58

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -118,6 +118,16 @@
118
118
 
119
119
  ```javascript
120
120
 
121
+ var btn = document.getElementById('button');
122
+
123
+ var btn2 = document.getElementById('button2');
124
+
125
+ var result = document.getElementById('result');
126
+
127
+ var kekka = document.getElementById('kekka');
128
+
129
+
130
+
121
131
  btn.addEventListener('click', function() {
122
132
 
123
133
  var search = document.getElementById('search').value;

1

補足

2020/09/14 07:50

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -12,6 +12,14 @@
12
12
 
13
13
 
14
14
 
15
+ [追記]
16
+
17
+ 下記jqueryでも、列１と列２を含めたキーワードだとやはりうまくヒットしませんね・・・。
18
+
19
+
20
+
21
+
22
+
15
23
  [元jqueryデータ]
16
24
 
17
25
  ```jquery