jquery.csv2table.jsを使ったCSVの検索機能についての質問

このQ&Aのポイント
  • jquery.csv2table.jsを使ってCSVの会員名簿をWEBに表示する際に、検索機能を追加したいと思っています。具体的な方法がわからず困っています。
  • 参考サイトを見ながらCSVを読み込み、表示することは成功しました。しかし、検索窓を追加して特定のデータを検索し表示する方法がわかりません。
  • 例文のようにテキストエリアに入力した値をCSVデータの中から検索し、該当するデータを表示する方法を教えていただけませんか?
回答を見る
  • ベストアンサー

jquery.csv2table.jsに検索窓

CSVの会員名簿を読み込み、表にしてWEBに表示する為にjquery.csv2table.jsを使った こちらのサイトを参考にさせて頂きました。 参考サイト http://jsgt.org/lib/jquery/plugin/csv2table/v002/test.htm CSVを読み込み、表示は成功したのですが。 検索窓を付けて、たとえば「青木」と検索すればCSVから青木さんを拾ってきて表示としたいのですが、やり方が解りません。>< <input class = "btn1" type = "button" onclick = "$('#view541').csv2table('./data/where1.csv',{ where : [{'種類':'like タ__'}] });" value="where : [{'種類':'like タ__'}]"> この例文をtype= "text"にしてテキストエリアに入力した値をCSVデータの中から見つけ出して表示するにはどうすればいいのでしょうか? どなたか、ご教授頂けますと助かります。( p_q)

質問者が選んだベストアンサー

  • ベストアンサー
  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.1

こんにちは。 検索窓は以下のように準備して <input type="text" id="word"><button type="button">検索</button> <script type="text/javascript"> $().ready ( function() { $('#btn-search').click ( function() { $('#view0').csv2table('./test.csv', { where: [ {'名前':'like ' + $('#word').val() + '%'} ] }); }); }); </script> のようにするとid="word"に入力された文字列をベースに検索を実行するようになります。 上記サンプルは前方一致検索の例です。

nana_coco
質問者

お礼

LancerVIIさま ありがとうございます!! <button type="button" id="btn-search">検索</button> で、無事検索が表示できましたっO(≧▽≦)O 感謝いたします。

関連するQ&A

  • jquery.csv2table.jsのテーブル

    CSVの会員名簿を読み込み、表にしてWEBに表示する為にjquery.csv2table.jsを使った こちらのサイトを参考にさせて頂きました。 http://jsgt.org/lib/jquery/plugin/csv2table/v002/test.htm CSVを読み込み、表示は成功したのですが。 もともとのCSVデータが横長に項目が多い為 表示されるテーブルは横長の表となってしまいます。 出来れば一行をセルの結合で2段にまとめて表示したいと思っています。 <td colspan="2"><td rowspan="2">を使って [1]はココに表示[2]はココに表示するみたいにテンプレ化して表示できればと思っていますが セルの背景色は変更できてもセルの場所を任意に変更できません やはりそういった事は難しいのでしょうか どなたか詳しい方、教えて頂けますと幸いです。 よろしく願い致します。

  • 【Jquery】csv2tableを使ってcsvを呼び出した表について

    JQueryのcsv2tableをつかってcsvを表に吐き出ししているものを Webに設置しています。 表示する際に、csvの0列目と1列目と3列目だけを表示させられるように下記のようなタグをいれています。 <input class = "btn1" type = "button" onclick = "$('#view54').csv2table('./data/Book12-utf8.csv',{ select : [0,1,3] });" value="Run select:[0,1,3]"> <div id="view54"></div> 参考:http://jsgt.org/lib/jquery/plugin/csv2table/v002/test-tm.htm#nview54 ここに、下記タグのように、偶数行だけ色を変えるよう指定したいのですがうまくいきません。 <input class = "btn1" type = "button" onclick = " $('#view2').csv2table('./test.txt',{ onload : function(id,op,data,ary){ $('tr:even','#'+id).css('background','#eee') } })" value = "Load CSV"> ここにある    onload : function(id,op,data,ary){ $('tr:even','#'+id).css('background','#eee') } が必要と思い、 <input class = "btn1" type = "button" onclick = "$('#view54').csv2table('./data/Book12-utf8.csv',{ select : [0,1,3]     onload : function(id,op,data,ary){ $('tr:even','#'+id).css('background','#eee') } });" value="Run select:[0,1,3]"> としたのですが、こうするとcsvが表示されなくなります。 おそらく書き方がどこかおかしいと思うのですが、どこがおかしいか教えてください。

    • ベストアンサー
    • AJAX
  • jquery.csv2tablについて

    jquery.csv2table使用時、行絞込みをしたいのですが、以下のように「==」の条件だと GoogleChromeのみ絞込みが行えません。 <input class="btn1" type = "button" onclick="$('#viewSettingWhere').csv2table('./data/XXXX.csv',{ where : [{'年齢':'==5'}] });" value="where : [{'年齢':'==5'}]"> Firefox、IE8では正常に絞込みが行えます。 また、以下の条件にすると、GoogleChromeでも絞込みは行えます。 <input class="btn1" type = "button" onclick="$('#viewSettingWhere').csv2table('./data/XXXX.csv',{ where : [{'年齢':'<=5','&&','>=5'}] });" value="where : [{'年齢':'絞込み'}]"> 文字列を比較したいので「==」を使用して絞込みを行いたいのですが、どなたかご教授していただけないでしょうか。 宜しくお願い致します。

  • csv2tableのテーブルを動的に変更したい

    現在、jquery.csv2table.jsでCSVファイルを読込み、出力されるテーブルデータをグラフ表示しています。 ここで出力されるテーブルデータをブラウザ上から動的(テキストエリア化)に変更でき、グラフデータにも反映できるようにしたいと考えていますが、下記の課題に対して、どこをどのように手を加えてよいかまったくわからない状態です。 「テーブルデータのテキストエリア化」 「テキストエリアからのグラフ、CSVファイルへのフィードバック方法」 HTML、JavaScriptに関して全くの素人で、他サイトを参考にしつつコピペで作っている状態です。 色々探ってはみたのですが、参考となるサイトを見つけることができず、自力での解決も困難な状況で困っています。 参考になりそうなサイトの紹介などでもかまいませんので、皆さんのお力をお貸しください。 どうぞよろしくお願いします。 <参考サイト> http://jsgt.org/lib/jquery/plugin/csv2table/v002/test.htm ※ここの”setting.use ( use jQchart )”が現在の状態に近いです

  • 「jquery.csv2table.js」から生成されたテーブルに「s

    「jquery.csv2table.js」から生成されたテーブルに「super tables」を適用したい。 csv2tablesを使用して、テーブルの作成・表示はできるのですが、一部の行と列を 固定したいと考えています。色々検索した結果、「super tables」が良いかと思い、 以下のサイトを参考にスクリプトを追加していますが、エラーが表示され、固定 された表示になりません。 以下にスクリプトの情報等を記載します。書き方がそもそも間違っている等、 ご教示下さい。よろしくお願いします。 <参考にしたサイト> http://c-brains.jp/blog/wsg/09/06/16-151445.php <IE8のエラーメッセージ> Web ページ エラーの詳細 ユーザー エージェント: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C) タイムスタンプ: Sun, 29 Aug 2010 14:44:55 UTC メッセージ: 'this.sDataTable.tBodies.0' は Null またはオブジェクトではありません。 superTables.js ライン: 92 文字: 3 コード: 0 <HTML・スクリプト> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link rel="stylesheet" href="./css/superTables.css" type="text/css" /> <script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="./js/jquery.csv2table.js"></script> <script type="text/javascript" src="./js/superTables.js"></script> <script type="text/javascript"> $(function(){ $('#view1').csv2table('./test.csv'); }); </script> <style type="text/css"> .fakeContainer { margin: 0 0 20px; width: 600px; height: 200px; overflow: hidden; } </style> </head> <body> <div id="view1" class="fakeContainer"></div> <script type="text/javascript"> //<![CDATA[ (function () { new superTable("view1", { cssSkin : "sDefault", headerRows : 1, fixedCols : 3 }); })(); //]]> </script> </body> </html> <test.csvの内容> No,項目1,項目2,項目3,項目4,項目5,項目6,項目7,項目8,項目9,項目10 1,,,,,,,,,, 2,,,,,,,,,, 3,,,,,,,,,, 4,,,,,,,,,, 5,,,,,,,,,, 6,,,,,,,,,, 7,,,,,,,,,, 8,,,,,,,,,, 9,,,,,,,,,, 10,,,,,,,,,, 11,,,,,,,,,, 12,,,,,,,,,, 13,,,,,,,,,, 14,,,,,,,,,, 15,,,,,,,,,, 16,,,,,,,,,, 17,,,,,,,,,, 18,,,,,,,,,, 19,,,,,,,,,, 20,,,,,,,,,,

  • jQueryを使ったCSVテーブル表示

    こんにちは、以下のサイトにある「csv2table-0.02-b-1.zip」を ダウンロードし、サンプルを利用してCSVデータをWEB上に表示する 機能を、自社のHPで利用しております。 http://allabout.co.jp/internet/javascript/closeup/CU20080229A/index... 上記サイトの中に「csv2table デモ v0.02(2008.3.1リリース) 」 の項目があり、以下2点のサンプルがあります。 ・setting.select 列の選択 ・setting.where 行の絞込み 質問ですが、例えば3列目が"田中"の項目(行)だけ抽出し、それプラス 3列目自体を表示させないような処理を作りたいのですが、 どのように設定すれば実現できますでしょうか? ※以下のように設定すると何も項目が表示されません…  当たり前ですが、select : [0,1,2,3,4]とすると正しく指定した  条件で抽出できます。 onclick = "$('#view54').csv2table('./data/Book12-utf8.csv',{ where : [{'名前':'==田中'}] select : [0,1,3,4] });" どなたかご存知の方がいらっしゃいましたら、アドバイス頂けると 幸いです。 よろしくお願いいたします。

  • jquery classifyByCol について

    jqueryの勉強を始めたばかりの初心者です。 jqueryで下記のコードでセルの塗り分けができましたが、同時に複数列を塗り分けができる方法があるのか、どなたかご教授ください。 合わせて、セルの塗りつぶしではなく、文字色の変更が可能であれば、ご教授ください。 宜しくお願いいたします。 <input class = "btn1" type = "button" onclick = "$('#classifyTest').csv2table('./data/classify.csv',{ onload : function(id,op,data,ary){ $.csv2table.f.classifyByCol( id,3,[ ['>1','#D0FFE0'], ['>3','#98D9FF'], ['>5','#8CA9FF'] ] ) } });" value="classifyByCol"> <div id="view542"></div>

  • csvデータをひとつのテーブルに読み込みたい

    Perlを勉強し始めた初心者です。 Perlでスケジュール管理ができるものを作っています。 月ごとのカレンダーではなく、1日単位で画面が切り替わるようにしています。 9:00~21:30までの時間を30分ごとに区切ったタイムテーブルに、 csvに保存している予定データを表示させたいのですが、うまくいきません。 かなり省略していますが、下記のようなソースです。 ************************************************************************ for($i=9; $i<=21; $i++) #時間の数だけテーブルをループさせます。 { open(IN,"data.csv"); while (<IN>) { #ここにテーブルタグを書き、csvの予定データを読み込みます。 } close(IN); } ************************************************************************ 上のようにすると、csvファイルにある予定データの数だけテーブルを 繰り返してしまいます。もし予定データが5件あるとしたら、9:00の行が5つ、 9:30の行が5つ、と作成されてしまいます。 テーブルを重複させずにcsvのデータを表示させるにはどうしたら良いのでしょうか? 根本的な考え方が間違っているのでしょうか? わかりにくい質問になってしまいましたが、アドバイス頂ければ嬉しく思います。

  • テーブルの途中から折りたためるjquery

    テーブルの途中から折りたためるjqueryを探しています。 当方、java scriptはほぼ素人です。 かなり前に他サイトでみた動きを再現したいのですが、 探してみても見つからない為、質問させて頂きます。 イメージはテーブルで組まれた下記のような表があり [すべて表示]のリンクを押すと非表示になっていた部分が表示される感じです。 ■ 通常時 01 XXXX YYYYYY 02 XXXX YYYYYY 03 XXXX YYYYYY [すべて表示] クリック時 01 XXXX YYYYYY 02 XXXX YYYYYY 03 XXXX YYYYYY 04 XXXX YYYYYY 05 XXXX YYYYYY 06 XXXX YYYYYY [戻す] このような動作をするjqueryでフリーの者があれば教えて頂けないでしょうか。

  • jQueryのSnowfall Pluginで

    jQueryのSnowfall Pluginで、複数の画像を降らせたいのですが、どのようにカスタマイズしたら良いでしょうか? ちなみに下記サイトのやり方で、1種類の画像(png)を降らせるところまでは出来ています。 http://wispblog.tree-web.net/data/1/page_1_1356.html 上記サイトのやり方ですと1種類だけなので、これを複数種類の画像(png)を同時に降らせる形にしたいのです。 javascriptはある程度のカスタマイズはできますが、自分で一から作る程のスキルはありません。 どなたかお知恵を貸して頂けると幸いです。 どうぞよろしくお願いいたします。