- 締切済み
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] });" どなたかご存知の方がいらっしゃいましたら、アドバイス頂けると 幸いです。 よろしくお願いいたします。
- hiro1998rt
- お礼率0% (0/4)
- JavaScript
- 回答数4
- ありがとう数0
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
ANo.2 の fujillin です。 試して見ると、絞込みをselectで選択外にするとエラーになります。 多分、絞込みに使用する列を対象外にするのは、ロジック的に矛盾しているので、そのようなことはない仕様になっているのでしょう。 無理やりにやるなら、ロード後のＣＳＳ指定も可能になっているので、ＣＳＳで非表示にしてやればよいのでは？ エクステンドのファンクションの追加もできるようになっていたりするようで、かなり汎用的に作ってあるように見受けられます。 （中身は見てませんが）
- fujillin
- ベストアンサー率61% (1594/2576)
No.2です 投稿したら、文字をかえられちゃいました。 一つ目のinputの閉じタグ「>」が「&q...」に化けてるみたい。 （他にもあるかも知れないので、適宜訂正してください）
- fujillin
- ベストアンサー率61% (1594/2576)
試してみたところ、カンマ区切りで動くみたいですが？（IE6で確認） どこか文法ミスしてませんか？ サンプルページのjsとデータをそのまま拝借して、 「全データ」・・・・・・・・全て表示 「絞込み+列選択」・・・Age＜40 で 列[0,2,3] <html> <script src="http://jsgt.org/lib/jquery/plugin/csv2table/v002/js/jquery-1.2.6.min.js" type="text/javascript"></script> <script src="http://jsgt.org/lib/jquery/plugin/csv2table/v002/js/jquery.csv2table-0.02-b-2.8.js" type="text/javascript" charset="utf-8"></script> <body > <p> <input type="button" value="全データ" onclick="$('#view1').csv2table('http://jsgt.org/lib/jquery/plugin/csv2table/v002/data/test.txt');"> <div id="view1"></div> </p> <p> <input type="button" value="絞込み+列選択" onclick="$('#view2').csv2table('http://jsgt.org/lib/jquery/plugin/csv2table/v002/data/test.txt',{where:[{'Age':'<40'}],select:[0,2,3]});"> <div id="view2"></div> </p> </body> </html>
- fujillin
- ベストアンサー率61% (1594/2576)
試してないので、わかりませんが… 引数の区切り文字がないから解釈されないということはないですか？ （質問文の投稿文のみ、区切りを省略したのでしょうか？） カンマ「,」の区切りを入れたらどうなりますか？
補足
fujillinさん、ご返信ありがとうございます。 「,」は入れておりますが、上手く動作しません。 ※質問には記載を忘れておりました。 お手数ですが、どうぞ宜しくお願いたします。
関連するQ&A
- 【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 : [{'年齢':'絞込み'}]"> 文字列を比較したいので「==」を使用して絞込みを行いたいのですが、どなたかご教授していただけないでしょうか。 宜しくお願い致します。
- 締切済み
- JavaScript
- 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)
- ベストアンサー
- JavaScript
- 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]はココに表示するみたいにテンプレ化して表示できればと思っていますが セルの背景色は変更できてもセルの場所を任意に変更できません やはりそういった事は難しいのでしょうか どなたか詳しい方、教えて頂けますと幸いです。 よろしく願い致します。
- ベストアンサー
- JavaScript
- ＣＳＶの３行目だけを…
はじめまして！Nakanoと申します。 えっと、以下質問になります。おねがいします。。 CGI/Perlを始めて１週間程度の素人なのですが、 ＣＳＶファイルをＨＴＭＬのテーブル表示させる 様にしたいなと思っています。 そこで用意したＣＳＶファイルが５行と８列で カンマ区切りのみで構成されています。 このＣＳＶファイルから３行目だけを抽出する方法 ってありますでしょうか？ １行目のみ表示や１行目以外の２行目以下全てを表示 させたりは出来たのですが、３行目だけを表示するの がどうしても分かりませんでした・・・・・ 何方様か。よろしければその辺の所を詳しくご指導 いただけないでしょうか？ よろしくおねがいします。
- ベストアンサー
- Perl
- <SELECT>の<option value="#">で#にリンクされるような形でcsv2tableをつかってcsvテーブルを出したい
説明がうまくできないのですが 通常、option valueの値を下記のように <select id="pref" name="pref" class="selectable"> <optgroup label="海の魚"> <option value="001.html">真鯛</option> <option value="002.html">ガシラ</option> </optgroup> <optgroup label="川の魚"> <option value="003.html">鮎</option> <option value="004.html">鯉</option> </optgroup> </select> となっている場合、真鯛を選択すると001.htmlにジャンプしますよね。 こういうのの応用で、↓ここのように http://allabout.co.jp/internet/javascript/closeup/CU20080229A/index2.htm csvから表を呼び出して表示するようにしたいのですが、具体的にどのようにすればよいでしょうか？ 上記サイトでは <input>タグで呼び出すようにしていますので、物理的に不可能な場合は最終<input>タグでもいいかなと思っているのですが、情報が多いためできればインターフェースをすっきりさせたい面もあって<select>メニューから選択し、それが反映されるようにしたいのですが、どのようにすればよいでしょうか？ 当方、htmlとcssの知識は多少ありますが、jsやajaxの知識はあまりありませんので、できるだけ詳しく教えていただけるとありがたいです。 ajaxを使用する場合、ライブラリはJquery1.3を使用していますので かち合わないようにお願いします。 イメージ的には、下記のようなものが作りたいです。 このままだと動かないですけど・・・イメージとして・・・ <select id="pref" name="pref" class="selectable"> <optgroup label="海の魚"> <option value=" $('#fish').csv2table('001.csv',{ select : [0,1,2] });" >真鯛</option> <option value=" $('#fish').csv2table('001.csv',{ select : [0,3,4] });" ">ガシラ</option> </optgroup> <optgroup label="川の魚"> <optgroup label="海の魚"> <option value=" $('#fish').csv2table('002.csv',{ select : [0,1,2] });" >鮎</option> <option value=" $('#fish').csv2table('002.csv',{ select : [0,3,4] });" ">鯉</option> </optgroup> </select> <div id="fish"></div> イメージとしては、プルダウンで真鯛を選択すると、<div id="fish">●●</div>ここに、001.csvの0列・1列・2列目が吐き出され、またプルダウンから鯉を選択すると、002.csvの0列・3列・4列目が吐き出しなおされるというようなイメージです。
- ベストアンサー
- JavaScript
- 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ファイルにある予定データの数だけテーブルを 繰り返してしまいます。もし予定データが５件あるとしたら、9:00の行が５つ、 9:30の行が５つ、と作成されてしまいます。 テーブルを重複させずにcsvのデータを表示させるにはどうしたら良いのでしょうか？ 根本的な考え方が間違っているのでしょうか？ わかりにくい質問になってしまいましたが、アドバイス頂ければ嬉しく思います。
- 締切済み
- Perl
- 同じテーブルでのＵＮＩＯＮ
テーブルtableである列aのデータが1,2,3,4,5,6,7,8,9と 入っていたとします。 このテーブルを1,2,5,3,4,6,7,8,9という順番で SELECTしたい場合はどのようにすればよろしいでしょうか？ select a from table where a IN (1,2) union select a from table where a = 5 union select a from table where a NOT IN (1,2,5) としてみたのですが1,2,3,4,5,6,7,8,9と表示されてしまいます。 宜しくお願いいたします。
- ベストアンサー
- SQL Server
- テーブルにcsvファイルをインポートできない
かなり困っています。REDHAT LINUXでpostgresのテーブルにpsqlからのCOPYコマンドでcsvファイルのデータをインポートしようとしているのですが、文字数オーバーのエラーがでてしまいます。テーブルは２列で１つ目の列はCHAR(10)で２列目はINT4型です。csvファイルの内容はとりあえず１行だけ入れていて「"1234567890","1234"」を入れています。コマンドはpsqlで「COPY テーブル FROM 'ファイルのパス' USING DELIMITER ","」で行いました。エラーはおそらくインポートしたデータがおかしくなって変な桁数になっているのですが、どういうふうにおかしくなっているのかがよくわからないので対策できません。
- ベストアンサー
- PostgreSQL
- 「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,,,,,,,,,,
- ベストアンサー
- JavaScript
補足
hiro1998rtさん、ご返信ありがとうございます。 絞込みの条件を指定した列を表示しないようにしたいのですが 上手く設定出来ない状況です。 例えば「Age」が3列目だった場合、その3列目の部分を表示しないようにしたいです。 お手数ですが、どうぞよろしくお願いいたします。