###前提・実現したいこと
(大目的)
PHPで取り込んだCSVデータのなかから、特定の文字の出現回数をカウントしたいと思っています。
*アンケート集計
(いま取り組んでいること)
CSVに直接アクセスして集計することを断念して、一度csvのデータをhtmlに表示させて、その表示された内容をカウントすることに挑戦しています。
###発生している問題・エラーメッセージ
1:csvファイルをhtmlにtable形式で表示させるjQuery「CSVToTable」を利用しました。(成功)
ライブラリ
https://code.google.com/archive/p/jquerycsvtotable/
2:htmlに表示されたデータの中から、特定のKWの出現回数をカウントするために、jQueryの「$("要素指定:contains('特定の文字')").length;」を利用したのですが、うまくカウントできません。
###該当のソースコード
<?php function h($str){ return htmlspecialchars($str,ENT_QUOTES); } // 受け取ったデータを変数で定義 $age = $_POST["age"]; $salary = $_POST["salary"]; $comfort = $_POST["comfort"]; $pref = $_POST["pref"]; // 書き込み処理 $file = fopen("data/data.csv","a"); // ファイル読み込み flock($file, LOCK_EX); // ファイルロック fputcsv($file, $_POST); // csvで書き込み flock($file, LOCK_UN); // ファイルロック解除 fclose($file); ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" /> <title>アンケート結果</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="jquery.csvToTable.js"></script> <!--[if lt IE ]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <[endif]--> </head> <body> <div id="donutchart" style="width: 900px; height: 500px;"></div> <div id="donutchart2" style="width: 900px; height: 500px;"></div> <div id="donutchart3" style="width: 900px; height: 500px;"></div> <!-- ローデータを表示させるjQuery の表示指定 --> <div class="table_csv"></div> <!-- ローデータを表示させるjQuery --> <script> $(function(){ $(".table_csv").CSVToTable("data/data.csv", { headers: ['年齢','年収','満足度','勤務地'], //headerオプション } ); }); </script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // 各グラフの数値を計算する変数を指定 var cntAge20 = $("td:contains('20代')").length;// var cntAge30 = $("td:contains('30代')").length; var cntAge40 = $("td:contains('40代')").length; var cntAge50 = $("td:contains('50代以上')").length; // console.log(cntTest); console.log(cntAge20); console.log(cntAge30); console.log(cntAge40); console.log(cntAge50); // 各グラフを表示させるプログラム google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Age', 'Share'], ['20代', cntAge20], ['30代', cntAge30], ['40代', cntAge40], ['50代以上', cntAge50], ]); var data2 = google.visualization.arrayToDataTable([ ['Salary', 'Share'], ['300万ー350万', 11], //数字仮置き ['351万ー400万', 2], //数字仮置き ['400万ー450万', 2], //数字仮置き ['451万ー500万', 2], //数字仮置き ['500万以上', 2], //数字仮置き ]); var data3 = google.visualization.arrayToDataTable([ ['Comfort', 'Share'], ['大変満足', 11], //数字仮置き ['まあまあ満足', 2], //数字仮置き ['やや不満', 2], //数字仮置き ['かなり不満', 2], //数字仮置き ]); var options1 = { title: '年齢', pieHole: 0.4, }; var options2 = { title: '年収', pieHole: 0.4, }; var options3 = { title: '満足度', pieHole: 0.4, }; var chart = new google.visualization.PieChart(document.getElementById('donutchart')); chart.draw(data, options1); var chart2 = new google.visualization.PieChart(document.getElementById('donutchart2')); chart2.draw(data2, options2); var chart3 = new google.visualization.PieChart(document.getElementById('donutchart3')); chart3.draw(data3, options3); } </script> </body> </html>
###試したこと
参考にしたサイトURL
http://www.jquerystudy.info/reference/miscellaneous/length.html
https://lab.sonicmoov.com/markup/jquery/jquery-selectors/
###補足情報(言語/FW/ツール等のバージョンなど)
(追記)
まだ解決していませんが、「CSVToTable」によってhtmlに表記されたtableタグの内容を、そのままコピーしてhtmlに直書き(ペースト)したところ、
var cntAge20 = $("td:contains('20代')").length;
が正常にカウントしはじめました。
「CSVToTable」によって書き出されるタグを、
var cntAge20 = $("td:contains('20代')").length;
が認識できていないのかもしれません。
(追記2)
フォームのページのソースを記載しました。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" /> <title>満足度アンケート</title> <!-- <link rel="stylesheet" type="text/css" href="css/reset.css" /> --> <link rel="stylesheet" type="text/css" href="style.css" /> <!--[if lt IE ]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <[endif]--> </head> <body> <h1>満足度アンケート</h1> <form action="output_data.php" method="post" accept-charset="utf-8"> <!-- <p>ニックネーム:<input id="" type="text" name="name" value=""></p> <p>Email:<input id="" type="text" name="email" value=""></p> --> <p>年齢:<select name="age"> <option value="">年齢を選んでください <option value="20代">20代 <option value="30代">30代 <option value="40代">40代 <option value="50代以上">50代以上</select> </p> <p>年収:<select name="salary"> <option value="">現在の年収を選んでください。 <option value="300万ー350万">300万ー350万 <option value="351万ー400万">351万ー400万 <option value="400万ー450万">400万ー450万 <option value="451万ー500万">451万ー500万 <option value="500万以上">500万以上 </select> </p> <p>現在の仕事に満足していますか?:<select name="comfort"> <option value="">満足レベルを選んでください。 <option value="大変満足している">大変満足している <option value="まあまあ満足している">まあまあ満足している <option value="やや不満">やや不満 <option value="かなり不満">かなり不満 </select> </p> <p>勤務地を選んでください。:<select name="pref"> <option value="">都道府県 <option value="北海道">北海道 <option value="青森県">青森県 <option value="岩手県">岩手県 <option value="宮城県">宮城県 <option value="秋田県">秋田県 <option value="山形県">山形県 <option value="福島県">福島県 <option value="茨城県">茨城県 <option value="栃木県">栃木県 <option value="群馬県">群馬県 <option value="埼玉県">埼玉県 <option value="千葉県">千葉県 <option value="東京都" selected="">東京都 <option value="神奈川県">神奈川県 <option value="新潟県">新潟県 <option value="富山県">富山県 <option value="石川県">石川県 <option value="福井県">福井県 <option value="山梨県">山梨県 <option value="長野県">長野県 <option value="岐阜県">岐阜県 <option value="静岡県">静岡県 <option value="愛知県">愛知県 <option value="三重県">三重県 <option value="滋賀県">滋賀県 <option value="京都府">京都府 <option value="大阪府">大阪府 <option value="兵庫県">兵庫県 <option value="奈良県">奈良県 <option value="和歌山県">和歌山県 <option value="鳥取県">鳥取県 <option value="島根県">島根県 <option value="岡山県">岡山県 <option value="広島県">広島県 <option value="山口県">山口県 <option value="徳島県">徳島県 <option value="香川県">香川県 <option value="愛媛県">愛媛県 <option value="高知県">高知県 <option value="福岡県">福岡県 <option value="佐賀県">佐賀県 <option value="長崎県">長崎県 <option value="熊本県">熊本県 <option value="大分県">大分県 <option value="宮崎県">宮崎県 <option value="鹿児島県">鹿児島県 <option value="沖縄県">沖縄県 </select></p> <input id="" type="submit" name="" value="送信"> </form> </body> </html>
回答1件
あなたの回答
tips
プレビュー