質問編集履歴
3
1つにまとめて試した記述を追加しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -236,6 +236,124 @@
|
|
|
236
236
|
|
|
237
237
|
・jsファイルを1つにまとめる→読み込まれるcsvファイルが同一のものになってしまった。
|
|
238
238
|
|
|
239
|
+
```javascript
|
|
240
|
+
|
|
241
|
+
// csv読み込み関数
|
|
242
|
+
|
|
243
|
+
function readCsv(data) {
|
|
244
|
+
|
|
245
|
+
//検索結果用
|
|
246
|
+
|
|
247
|
+
var target = '.list'; //csvを表示するところ
|
|
248
|
+
|
|
249
|
+
var csv = $.csv.toArrays(data); //csv読み込み
|
|
250
|
+
|
|
251
|
+
var insert = ''; //作るhtmlを入れるやつ
|
|
252
|
+
|
|
253
|
+
for (var i = 0; i<csv.length;i++){
|
|
254
|
+
|
|
255
|
+
//htmlの要素
|
|
256
|
+
|
|
257
|
+
insert += ' <div class="item-list" data-no1="' + csv[i][0] + '" data-no2="' + csv[i][1] + '">';
|
|
258
|
+
|
|
259
|
+
insert += ' </div>';
|
|
260
|
+
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
//作ったhtmlを挿入
|
|
264
|
+
|
|
265
|
+
$(target).append(insert);
|
|
266
|
+
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
|
|
270
|
+
|
|
271
|
+
//絞り込み項目用
|
|
272
|
+
|
|
273
|
+
var target2 = '.form'; //csvを表示するところ
|
|
274
|
+
|
|
275
|
+
var csv2 = $.csv.toArrays(data); //csv読み込み
|
|
276
|
+
|
|
277
|
+
var insert2 = ''; //作るhtmlを入れるやつ
|
|
278
|
+
|
|
279
|
+
for (var i = 0; i<csv2.length;i++){
|
|
280
|
+
|
|
281
|
+
insert2 += ' <div class="box">'
|
|
282
|
+
|
|
283
|
+
insert2 += ' <span class="label">' + csv2[i][0] + '</span>'
|
|
284
|
+
|
|
285
|
+
insert2 += ' <ul>'
|
|
286
|
+
|
|
287
|
+
for (var j = 1;j<csv2[i].length;j++){
|
|
288
|
+
|
|
289
|
+
insert2 += ' <li><label><input type="checkbox" name="' + csv2[i][j] + '" value="' + csv2[i][j] + '">' + csv2[i][j] + '</label></li>'
|
|
290
|
+
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
insert2 += ' </ul>'
|
|
294
|
+
|
|
295
|
+
insert2 += ' </div>'
|
|
296
|
+
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
//作ったhtmlを挿入
|
|
300
|
+
|
|
301
|
+
$(target2).append(insert2);
|
|
302
|
+
|
|
303
|
+
|
|
304
|
+
|
|
305
|
+
//csvを読み込む
|
|
306
|
+
|
|
307
|
+
$(document).ready(function(){
|
|
308
|
+
|
|
309
|
+
//検索結果用
|
|
310
|
+
|
|
311
|
+
var csvfile = 'list.csv';
|
|
312
|
+
|
|
313
|
+
$.get(csvfile, readCsv, 'text');
|
|
314
|
+
|
|
315
|
+
|
|
316
|
+
|
|
317
|
+
$('input[name="no1"]').change(function() {
|
|
318
|
+
|
|
319
|
+
var val = $(this).val();
|
|
320
|
+
|
|
321
|
+
if (val == 'テストA') {
|
|
322
|
+
|
|
323
|
+
var csvfile2 = 'form1.csv';
|
|
324
|
+
|
|
325
|
+
$.get(csvfile2, readCsv, 'text');
|
|
326
|
+
|
|
327
|
+
} else if (val == 'テストB') {
|
|
328
|
+
|
|
329
|
+
var csvfile2 = 'form2.csv';
|
|
330
|
+
|
|
331
|
+
$.get(csvfile2, readCsv, 'text');
|
|
332
|
+
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
$(".form").empty();
|
|
336
|
+
|
|
337
|
+
});
|
|
338
|
+
|
|
339
|
+
});
|
|
340
|
+
|
|
341
|
+
|
|
342
|
+
|
|
343
|
+
//読み込みが完了したら
|
|
344
|
+
|
|
345
|
+
$(document).ajaxStop(function() {
|
|
346
|
+
|
|
347
|
+
|
|
348
|
+
|
|
349
|
+
});//読み込みが終わったらここまで
|
|
350
|
+
|
|
351
|
+
```
|
|
352
|
+
|
|
353
|
+
|
|
354
|
+
|
|
355
|
+
|
|
356
|
+
|
|
239
357
|
・下記ページなどを参考に修正を試みましたが②のcsvの切り替えの記述がわからず断念
|
|
240
358
|
|
|
241
359
|
https://teratail.com/questions/183007
|
2
説明に余計な情報があってわかりづらかったので、修正しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -2,25 +2,23 @@
|
|
|
2
2
|
|
|
3
3
|
**結論**
|
|
4
4
|
|
|
5
|
-
javascriptでcsvを複数読み込
|
|
5
|
+
javascriptでcsvを複数読み込んでページ上に表示させる。
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
**説明**
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
csvファイルを読み込んで、ページ上で表示させたいのですが、読み込みたいcsvが複数あります。
|
|
12
|
-
|
|
12
|
+
|
|
13
|
-
|
|
13
|
+
また、1つのcsvファイルは固定で読み込みますが、もう1つのcsvファイルは、選択しているラジオボタンによって読み込むファイルを変更させたいです。
|
|
14
|
-
|
|
14
|
+
|
|
15
|
-
・①
|
|
15
|
+
・①list.csv → 常時読み込んで表示させる内容
|
|
16
|
-
|
|
16
|
+
|
|
17
|
-
・②
|
|
17
|
+
・②form1.csv, form2.csv … → ラジオボタンの項目によって読み込む内容
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
|
|
22
|
-
|
|
20
|
+
|
|
23
|
-
|
|
21
|
+
上記それぞれを読み込むためのjsファイルを作成しています。
|
|
24
22
|
|
|
25
23
|
|
|
26
24
|
|
1
タイトルの修正
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
jQueryで複数のcsvを読み込
|
|
1
|
+
jQueryで複数のcsvを読み込んでページ上に表示させる
|
test
CHANGED
|
File without changes
|