- ベストアンサー
jquery.csv2table.jsのテーブルを使ってCSVデータを表示したい
fujillinの回答
- fujillin
- ベストアンサー率61% (1594/2576)
こんにちは。ANo3です。 「お薦めしない」といいながらも再度の投稿です（笑） csv2tableがどのような処理をしているか把握していないので、データはもちろん文書の構造もいじらない方が無難かなと思った次第です。 そうすると、どうしても表示のレイアウトでなんとかしようということに… HTMLが表示のためだけに利用されているなら、ANo4様の回答のように書き直しても問題は出ないでしょう。 ＞ＣＳＳで表示を変える方法は思案したのですが、やはりブラウザの差もあるので ＞不安定と思い避ける事といたしました。 ご意見ごもっともと思いますし、回答にも懸念を記載した通りです。 と言いながら・・・ いっそのこと、各セルをabsoluteで個々に指定してしまえば、ブラウザの差異も少ないのではないかと想像します。（せいぜい20項目程度？） 決してお薦めするつもりではありません（笑）
関連するQ&A
- 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
- テーブル結合 縦横両方するには？
テーブルの縦の結合は rowspan テーブルの横の結合は colspan これを使って表を結合しました １つのセルに両方入れると正常な表になりません <td rowspan="3" colspan="3"> </td> というふうに書いたのですが表が新たに変なセルが増えてしまいます 解決方法わかる方おしえてください あとrowspan="3"と書いたら縦の下２つのセルのプログラム文は 消しています、これは問題あるでしょうか？ colspanも同じやり方です
- ベストアンサー
- HTML
- 【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
- csv2tableのテーブルを動的に変更したい
現在、jquery.csv2table.jsでCSVファイルを読込み、出力されるテーブルデータをグラフ表示しています。 ここで出力されるテーブルデータをブラウザ上から動的(テキストエリア化)に変更でき、グラフデータにも反映できるようにしたいと考えていますが、下記の課題に対して、どこをどのように手を加えてよいかまったくわからない状態です。 「テーブルデータのテキストエリア化」 「テキストエリアからのグラフ、CSVファイルへのフィードバック方法」 HTML、JavaScriptに関して全くの素人で、他サイトを参考にしつつコピペで作っている状態です。 色々探ってはみたのですが、参考となるサイトを見つけることができず、自力での解決も困難な状況で困っています。 参考になりそうなサイトの紹介などでもかまいませんので、皆さんのお力をお貸しください。 どうぞよろしくお願いします。 <参考サイト> http://jsgt.org/lib/jquery/plugin/csv2table/v002/test.htm ※ここの”setting.use ( use jQchart )”が現在の状態に近いです
- ベストアンサー
- JavaScript
- 表の結合をｃｓｖで保存するには？
教えてください。 商品検索ツールを利用しています。 商品詳細データはｃｓｖで保存されます。 表の結合をしたいのですがうまくいきません。 たとえばビルダーで編集すると <TABLE border="1"> <TBODY> <TR> <TD colspan="4"> 商品の詳細</TD> </TR> <TR> <TD rowspan="2"> コード </TD> <TD colspan="2"> サイズ</TD> <TD rowspan="2">価格 </TD> </TR> <TR> <TD>mm </TD> <TD> インチ</TD> </TR> <TR> <TD> 000005</TD> <TD> ***</TD> <TD>○○ </TD> <TD> ￥50</TD> </TR> </TBODY> </TABLE> と、このようにソースに表示されますが、 これらをｃｓｖで保存しても？？？になります。 このような表をcsvファイルで作成することは可能なのでしょうか？ よろしくお願い致します。
- ベストアンサー
- その他([技術者向] コンピューター)
- テーブルのレイアウトがおかしくなります・・・
先ほども質問して教えていただいたのですが、少し対応できないことが出来てしまったので 再び質問いたします。 <table border="1" width="100%"> <tr> <td width="20" rowspan="2">1</td> <td width="30"> </td> <td> </td> </tr> <tr> <td colspan="2"> aaaaaaaaaaaaaaaaaaaaaa</td> </tr> </table> 1)先ほどtable-layout:fixedを教えてもらったのですが、一番左のセルの番号の桁数が増えた場合には幅を増やして表示したい （つまり最大の幅にしたい） 2)width=30の部分を書かないとcolspanのセルに影響を受けないのですが、width=30を書くととたんにcolspanのセルに影響されて びよ～んと幅が大きくなってしまいます。ずばりhtmlのバグでしょうか？ よろしくお願いいたします。
- ベストアンサー
- HTML
- tableのtr要素をドラッグ＆ドロップで任意に入れ替え、その順番を取
tableのtr要素をドラッグ＆ドロップで任意に入れ替え、その順番を取りたいです。 jqueryのSortableプラグインを調べ、これならできそうとプログラムを組み、 trの一行ごとならばできました。 やりたいことは、rowspanで連結されている<tr>を2行以上まとめて１つの要素とみなし、 入れ替えたいのですが、 jqueryのSortableでできますでしょうか？ <table> <tr><td rowspan="2">一行目</td><td>あいう</td> <tr><td>えお<td></tr> <tr><td rowspan="2">二行目</td><td>かきく</td> <tr><td>けこ<td></tr> </table> <table>を入れ子にすれば実現はできそうですが、 ちょっとCSSの関係もあり、その方法を採用するのは難しい気がしています。
- ベストアンサー
- AJAX
- スクロール付きのテーブルで、内側に線を付ける方法
添付画像のようにテーブル内に枠を周りに付けて二重の枠にして、 内側のテーブルとテーブルの間に破線をいれたいです。 しかし、CSSで設定しても破線も枠も表示されません。 こういう場合はどうすればいいのでしょうか？ <table id="j"> <tbody> <tr> <td> <DIV style="height:300px; overflow:auto;"> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> </div> </td> </tr> </tbody> </table> -----css------ #j{ cellpadding: 2; width: 520; background-color : #ffe3c8; border:1px solid #333; border-spacing:0; } } .t{ width: 500; height: 100; border:1px solid #333; } td{ cellspacing: 0; border-collapse: collapse; border-spacing:0; }
- ベストアンサー
- HTML
- テーブルについて
二つスライドが重なったようなテーブルを作りたいんですけど、一応、下記はそのように表示されたのですが、見え方で言うと、スライドの一枚目に文字を入れると、二枚目のスライドの形がずれてしまうのですがどうすればいいでしょう？ <TABLE width="636" cellspacing="0"> <TBODY> <TR> <TD bgcolor="#0080ff" colspan="3" rowspan="2"></TD> <TD width="20" height="20"></TD> </TR> <TR> <TD bgcolor="#97cbff" width="20"></TD> </TR> <TR> <TD height="20" width="20"></TD> <TD bgcolor="#97cbff" colspan="2" width="596"></TD> <TD bgcolor="#97cbff" width="20" height="20"></TD> </TR> </TBODY> </TABLE>
- ベストアンサー
- HTML
- 「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
お礼
fujillin様 再度ご回答頂きありがとうございます。 absoluteでの方法もあると言う事、参考にさせて頂きます。 ありがとうございました。