質問編集履歴

6

フォームページのソースを記載

2017/09/18 10:15

投稿

luckysamurai
luckysamurai

スコア8

test CHANGED
File without changes
test CHANGED
@@ -397,3 +397,233 @@
397
397
  ```
398
398
 
399
399
  が認識できていないのかもしれません。
400
+
401
+
402
+
403
+
404
+
405
+ (追記2)
406
+
407
+
408
+
409
+ フォームのページのソースを記載しました。
410
+
411
+ ```ここに言語を入力
412
+
413
+ <!DOCTYPE html>
414
+
415
+ <html lang="ja">
416
+
417
+ <head>
418
+
419
+ <meta charset="UTF-8">
420
+
421
+ <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
422
+
423
+ <title>満足度アンケート</title>
424
+
425
+ <!-- <link rel="stylesheet" type="text/css" href="css/reset.css" /> -->
426
+
427
+ <link rel="stylesheet" type="text/css" href="style.css" />
428
+
429
+ <!--[if lt IE ]>
430
+
431
+ <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
432
+
433
+ <[endif]-->
434
+
435
+ </head>
436
+
437
+ <body>
438
+
439
+ <h1>満足度アンケート</h1>
440
+
441
+
442
+
443
+ <form action="output_data.php" method="post" accept-charset="utf-8">
444
+
445
+
446
+
447
+ <!--
448
+
449
+ <p>ニックネーム:<input id="" type="text" name="name" value=""></p>
450
+
451
+
452
+
453
+ <p>Email:<input id="" type="text" name="email" value=""></p>
454
+
455
+ -->
456
+
457
+
458
+
459
+ <p>年齢:<select name="age">
460
+
461
+ <option value="">年齢を選んでください
462
+
463
+ <option value="20代">20代
464
+
465
+ <option value="30代">30代
466
+
467
+ <option value="40代">40代
468
+
469
+ <option value="50代以上">50代以上</select>
470
+
471
+ </p>
472
+
473
+
474
+
475
+ <p>年収:<select name="salary">
476
+
477
+ <option value="">現在の年収を選んでください。
478
+
479
+ <option value="300万ー350万">300万ー350万
480
+
481
+ <option value="351万ー400万">351万ー400万
482
+
483
+ <option value="400万ー450万">400万ー450万
484
+
485
+ <option value="451万ー500万">451万ー500万
486
+
487
+ <option value="500万以上">500万以上
488
+
489
+ </select>
490
+
491
+ </p>
492
+
493
+
494
+
495
+
496
+
497
+ <p>現在の仕事に満足していますか?:<select name="comfort">
498
+
499
+ <option value="">満足レベルを選んでください。
500
+
501
+ <option value="大変満足している">大変満足している
502
+
503
+ <option value="まあまあ満足している">まあまあ満足している
504
+
505
+ <option value="やや不満">やや不満
506
+
507
+ <option value="かなり不満">かなり不満
508
+
509
+ </select>
510
+
511
+ </p>
512
+
513
+
514
+
515
+ <p>勤務地を選んでください。:<select name="pref">
516
+
517
+ <option value="">都道府県
518
+
519
+ <option value="北海道">北海道
520
+
521
+ <option value="青森県">青森県
522
+
523
+ <option value="岩手県">岩手県
524
+
525
+ <option value="宮城県">宮城県
526
+
527
+ <option value="秋田県">秋田県
528
+
529
+ <option value="山形県">山形県
530
+
531
+ <option value="福島県">福島県
532
+
533
+ <option value="茨城県">茨城県
534
+
535
+ <option value="栃木県">栃木県
536
+
537
+ <option value="群馬県">群馬県
538
+
539
+ <option value="埼玉県">埼玉県
540
+
541
+ <option value="千葉県">千葉県
542
+
543
+ <option value="東京都" selected="">東京都
544
+
545
+ <option value="神奈川県">神奈川県
546
+
547
+ <option value="新潟県">新潟県
548
+
549
+ <option value="富山県">富山県
550
+
551
+ <option value="石川県">石川県
552
+
553
+ <option value="福井県">福井県
554
+
555
+ <option value="山梨県">山梨県
556
+
557
+ <option value="長野県">長野県
558
+
559
+ <option value="岐阜県">岐阜県
560
+
561
+ <option value="静岡県">静岡県
562
+
563
+ <option value="愛知県">愛知県
564
+
565
+ <option value="三重県">三重県
566
+
567
+ <option value="滋賀県">滋賀県
568
+
569
+ <option value="京都府">京都府
570
+
571
+ <option value="大阪府">大阪府
572
+
573
+ <option value="兵庫県">兵庫県
574
+
575
+ <option value="奈良県">奈良県
576
+
577
+ <option value="和歌山県">和歌山県
578
+
579
+ <option value="鳥取県">鳥取県
580
+
581
+ <option value="島根県">島根県
582
+
583
+ <option value="岡山県">岡山県
584
+
585
+ <option value="広島県">広島県
586
+
587
+ <option value="山口県">山口県
588
+
589
+ <option value="徳島県">徳島県
590
+
591
+ <option value="香川県">香川県
592
+
593
+ <option value="愛媛県">愛媛県
594
+
595
+ <option value="高知県">高知県
596
+
597
+ <option value="福岡県">福岡県
598
+
599
+ <option value="佐賀県">佐賀県
600
+
601
+ <option value="長崎県">長崎県
602
+
603
+ <option value="熊本県">熊本県
604
+
605
+ <option value="大分県">大分県
606
+
607
+ <option value="宮崎県">宮崎県
608
+
609
+ <option value="鹿児島県">鹿児島県
610
+
611
+ <option value="沖縄県">沖縄県
612
+
613
+ </select></p>
614
+
615
+
616
+
617
+
618
+
619
+ <input id="" type="submit" name="" value="送信">
620
+
621
+ </form>
622
+
623
+
624
+
625
+ </body>
626
+
627
+ </html>
628
+
629
+ ```

5

余計なコメントアウトを削除しました。

2017/09/18 10:15

投稿

luckysamurai
luckysamurai

スコア8

test CHANGED
File without changes
test CHANGED
@@ -376,7 +376,7 @@
376
376
 
377
377
  ```ここに言語を入力
378
378
 
379
- var cntAge20 = $("td:contains('20代')").length;//
379
+ var cntAge20 = $("td:contains('20代')").length;
380
380
 
381
381
  ```
382
382
 
@@ -392,7 +392,7 @@
392
392
 
393
393
  ```ここに言語を入力
394
394
 
395
- var cntAge20 = $("td:contains('20代')").length;//
395
+ var cntAge20 = $("td:contains('20代')").length;
396
396
 
397
397
  ```
398
398
 

4

追記しました。

2017/09/18 09:55

投稿

luckysamurai
luckysamurai

スコア8

test CHANGED
File without changes
test CHANGED
@@ -366,4 +366,34 @@
366
366
 
367
367
 
368
368
 
369
+
370
+
371
+ (追記)
372
+
373
+ まだ解決していませんが、「CSVToTable」によってhtmlに表記されたtableタグの内容を、そのままコピーしてhtmlに直書き(ペースト)したところ、
374
+
375
+
376
+
377
+ ```ここに言語を入力
378
+
379
+ var cntAge20 = $("td:contains('20代')").length;//
380
+
381
+ ```
382
+
383
+
384
+
369
- よろくお願います
385
+ が正常にカウントはじめま
386
+
387
+
388
+
389
+
390
+
391
+ 「CSVToTable」によって書き出されるタグを、
392
+
393
+ ```ここに言語を入力
394
+
395
+ var cntAge20 = $("td:contains('20代')").length;//
396
+
397
+ ```
398
+
399
+ が認識できていないのかもしれません。

3

PHP部分も含めて、すべて記載しました。

2017/09/18 09:54

投稿

luckysamurai
luckysamurai

スコア8

test CHANGED
File without changes
test CHANGED
@@ -44,17 +44,295 @@
44
44
 
45
45
  ```ここに言語を入力
46
46
 
47
+ <?php
48
+
49
+
50
+
51
+ function h($str){
52
+
53
+ return htmlspecialchars($str,ENT_QUOTES);
54
+
55
+ }
56
+
57
+
58
+
59
+
60
+
61
+ // 受け取ったデータを変数で定義
62
+
63
+
64
+
65
+ $age = $_POST["age"];
66
+
67
+ $salary = $_POST["salary"];
68
+
69
+ $comfort = $_POST["comfort"];
70
+
71
+ $pref = $_POST["pref"];
72
+
73
+
74
+
75
+
76
+
77
+
78
+
79
+
80
+
81
+ // 書き込み処理
82
+
83
+ $file = fopen("data/data.csv","a"); // ファイル読み込み
84
+
85
+ flock($file, LOCK_EX); // ファイルロック
86
+
87
+ fputcsv($file, $_POST); // csvで書き込み
88
+
89
+ flock($file, LOCK_UN); // ファイルロック解除
90
+
91
+ fclose($file);
92
+
93
+
94
+
95
+ ?>
96
+
97
+
98
+
99
+
100
+
101
+
102
+
103
+
104
+
105
+
106
+
107
+ <!DOCTYPE html>
108
+
109
+ <html lang="ja">
110
+
111
+ <head>
112
+
113
+ <meta charset="UTF-8">
114
+
115
+ <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
116
+
117
+ <title>アンケート結果</title>
118
+
119
+ <link rel="stylesheet" type="text/css" href="style.css" />
120
+
121
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
122
+
123
+ <script src="jquery.csvToTable.js"></script>
124
+
125
+ <!--[if lt IE ]>
126
+
127
+ <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
128
+
129
+ <[endif]-->
130
+
131
+ </head>
132
+
133
+
134
+
135
+
136
+
137
+ <body>
138
+
139
+
140
+
141
+
142
+
143
+ <div id="donutchart" style="width: 900px; height: 500px;"></div>
144
+
145
+ <div id="donutchart2" style="width: 900px; height: 500px;"></div>
146
+
147
+ <div id="donutchart3" style="width: 900px; height: 500px;"></div>
148
+
149
+
150
+
151
+ <!-- ローデータを表示させるjQuery の表示指定 -->
152
+
153
+
154
+
47
- <div id="test"></div>
155
+ <div class="table_csv"></div>
156
+
157
+
158
+
159
+
160
+
48
-
161
+ <!-- ローデータを表示させるjQuery -->
162
+
49
-
163
+ <script>
164
+
165
+ $(function(){
166
+
167
+ $(".table_csv").CSVToTable("data/data.csv",
168
+
169
+ {
170
+
171
+ headers: ['年齢','年収','満足度','勤務地'], //headerオプション
172
+
173
+ }
174
+
175
+ );
176
+
177
+ });
178
+
179
+ </script>
180
+
181
+
182
+
183
+
184
+
185
+
186
+
187
+
188
+
189
+
190
+
191
+ <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
50
192
 
51
193
  <script type="text/javascript">
52
194
 
195
+
196
+
197
+ // 各グラフの数値を計算する変数を指定
198
+
199
+ var cntAge20 = $("td:contains('20代')").length;//
200
+
53
- var cnt20 = $("tbody:contains('20代')").length;
201
+ var cntAge30 = $("td:contains('30代')").length;
202
+
54
-
203
+ var cntAge40 = $("td:contains('40代')").length;
204
+
205
+ var cntAge50 = $("td:contains('50代以上')").length;
206
+
207
+
208
+
209
+ // console.log(cntTest);
210
+
211
+ console.log(cntAge20);
212
+
213
+ console.log(cntAge30);
214
+
215
+ console.log(cntAge40);
216
+
217
+ console.log(cntAge50);
218
+
219
+
220
+
221
+
222
+
223
+
224
+
225
+ // 各グラフを表示させるプログラム
226
+
227
+ google.charts.load("current", {packages:["corechart"]});
228
+
229
+ google.charts.setOnLoadCallback(drawChart);
230
+
231
+ function drawChart() {
232
+
233
+ var data = google.visualization.arrayToDataTable([
234
+
235
+ ['Age', 'Share'],
236
+
237
+ ['20代', cntAge20],
238
+
239
+ ['30代', cntAge30],
240
+
241
+ ['40代', cntAge40],
242
+
243
+ ['50代以上', cntAge50],
244
+
245
+ ]);
246
+
247
+
248
+
249
+ var data2 = google.visualization.arrayToDataTable([
250
+
251
+ ['Salary', 'Share'],
252
+
253
+ ['300万ー350万', 11], //数字仮置き
254
+
255
+ ['351万ー400万', 2], //数字仮置き
256
+
257
+ ['400万ー450万', 2], //数字仮置き
258
+
259
+ ['451万ー500万', 2], //数字仮置き
260
+
261
+ ['500万以上', 2], //数字仮置き
262
+
263
+ ]);
264
+
265
+
266
+
267
+ var data3 = google.visualization.arrayToDataTable([
268
+
269
+ ['Comfort', 'Share'],
270
+
271
+ ['大変満足', 11], //数字仮置き
272
+
273
+ ['まあまあ満足', 2], //数字仮置き
274
+
275
+ ['やや不満', 2], //数字仮置き
276
+
277
+ ['かなり不満', 2], //数字仮置き
278
+
279
+ ]);
280
+
281
+
282
+
283
+
284
+
285
+ var options1 = {
286
+
287
+ title: '年齢',
288
+
289
+ pieHole: 0.4,
290
+
291
+ };
292
+
293
+
294
+
295
+ var options2 = {
296
+
297
+ title: '年収',
298
+
299
+ pieHole: 0.4,
300
+
301
+ };
302
+
303
+
304
+
305
+ var options3 = {
306
+
307
+ title: '満足度',
308
+
309
+ pieHole: 0.4,
310
+
311
+ };
312
+
313
+
314
+
55
- var cntTest = document.getElementById("test")
315
+ var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
56
-
316
+
57
- cntTest.innerHTML = cnt20 ;
317
+ chart.draw(data, options1);
318
+
319
+
320
+
321
+ var chart2 = new google.visualization.PieChart(document.getElementById('donutchart2'));
322
+
323
+ chart2.draw(data2, options2);
324
+
325
+
326
+
327
+ var chart3 = new google.visualization.PieChart(document.getElementById('donutchart3'));
328
+
329
+ chart3.draw(data3, options3);
330
+
331
+
332
+
333
+ }
334
+
335
+
58
336
 
59
337
  </script>
60
338
 
@@ -62,31 +340,11 @@
62
340
 
63
341
 
64
342
 
65
- <div class="table_csv"></div>
66
-
67
-
68
-
69
-
70
-
71
- <!-- CSVToTable -->
72
-
73
- <script>
74
-
75
- $(function(){
76
-
77
- $(".table_csv").CSVToTable("data/data.csv",
78
-
79
- {
80
-
81
- headers: ['年齢','年収','満足度','勤務地'], //headerオプション
82
-
83
- }
84
-
85
- );
86
-
87
- });
88
-
89
- </script>
343
+ </body>
344
+
345
+ </html>
346
+
347
+
90
348
 
91
349
  ```
92
350
 

2

CSVToTable  のライブラリリンク先を変更しました。

2017/09/18 09:41

投稿

luckysamurai
luckysamurai

スコア8

test CHANGED
File without changes
test CHANGED
@@ -28,7 +28,9 @@
28
28
 
29
29
  1:csvファイルをhtmlにtable形式で表示させるjQuery「CSVToTable」を利用しました。(成功)
30
30
 
31
+ ライブラリ
32
+
31
- [https://github.com/vividvilla/csvtotable](https://github.com/vividvilla/csvtotable)
33
+ [https://code.google.com/archive/p/jquerycsvtotable/](https://code.google.com/archive/p/jquerycsvtotable/)
32
34
 
33
35
 
34
36
 

1

ご指摘ありがとうございます。追加修正しました。よろしくお願いします。

2017/09/18 08:45

投稿

luckysamurai
luckysamurai

スコア8

test CHANGED
File without changes
test CHANGED
@@ -28,6 +28,8 @@
28
28
 
29
29
  1:csvファイルをhtmlにtable形式で表示させるjQuery「CSVToTable」を利用しました。(成功)
30
30
 
31
+ [https://github.com/vividvilla/csvtotable](https://github.com/vividvilla/csvtotable)
32
+
31
33
 
32
34
 
33
35
  2:htmlに表示されたデータの中から、特定のKWの出現回数をカウントするために、jQueryの「$("要素指定:contains('特定の文字')").length;」を利用したのですが、うまくカウントできません。
@@ -37,6 +39,8 @@
37
39
 
38
40
 
39
41
  ###該当のソースコード
42
+
43
+ ```ここに言語を入力
40
44
 
41
45
  <div id="test"></div>
42
46
 
@@ -56,13 +60,45 @@
56
60
 
57
61
 
58
62
 
63
+ <div class="table_csv"></div>
64
+
65
+
66
+
67
+
68
+
69
+ <!-- CSVToTable -->
70
+
71
+ <script>
72
+
73
+ $(function(){
74
+
75
+ $(".table_csv").CSVToTable("data/data.csv",
76
+
77
+ {
78
+
79
+ headers: ['年齢','年収','満足度','勤務地'], //headerオプション
80
+
81
+ }
82
+
83
+ );
84
+
85
+ });
86
+
87
+ </script>
88
+
89
+ ```
90
+
91
+
92
+
93
+
94
+
59
95
  ###試したこと
60
96
 
61
97
  参考にしたサイトURL
62
98
 
63
- http://www.jquerystudy.info/reference/miscellaneous/length.html
99
+ [http://www.jquerystudy.info/reference/miscellaneous/length.html](http://www.jquerystudy.info/reference/miscellaneous/length.html)
64
100
 
65
- https://lab.sonicmoov.com/markup/jquery/jquery-selectors/
101
+ [https://lab.sonicmoov.com/markup/jquery/jquery-selectors/](https://lab.sonicmoov.com/markup/jquery/jquery-selectors/)
66
102
 
67
103
 
68
104