以下バグ。 要素ごどに操作できてない。
<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>tryjquery_hide_p test</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("p#time").html("start"); <!-- $("div").append("<table>"); --> var k=1; <!-- $.get("summary.txt", function(data){ --> $.get("summary2.txt", function(data){ $("p#time").html("reading -> split"); html=data.split("\n"); $("p#time").html("splited"); <!-- $("div.file p").html(html[1]); --> for(var i in html){ k=k+1; $("p#time").html(k+"<br>"); $("table.test tbody").append("<tr>"); i2=html[i].split(","); for(var j in i2){ <!-- alert(i); --> $("table.test tbody").append("<td>"); $("table.test tbody").append(i2[j]); $("table.test tbody").append("</td>"); } $("table.test tbody").append("<tr>"); } <!-- $("table.test tbody").append("</table>");--> }); }); </script> </head> <body> <!-- <div class="file"> --> <p id="time"></p> <table class="test"> <tbody> </tbody> </table> <!-- </div> --> </body> </html>
行に色をつける
http://www.18th-technote.com/paint-table-color
Jquery 逆ひきレファレンス
http://www.atmarkit.co.jp/ait/articles/1002/12/news101_9.html
DOMとは?
http://piyo-js.com/05/use-dom.html
様々なjequryプラグイン
http://blog.verygoodtown.com/2011/05/jquery-table-plugins/
要素操作
http://semooh.jp/jquery/api/manipulation/
Fexigrid
http://news.mynavi.jp/articles/2008/06/25/flexigrid/
かっこよく
http://d.hatena.ne.jp/sideroad/20090801/1249123105
基本的には、かっこよくする場合はjqueryのバージョンの古いの考慮が必要
グラフ
http://tokkono.cute.coocan.jp/blog/slow/index.php/programming/javascript-data-visualization-libs/
これが正解。
DOM要素をつくる->その中を操作するって感覚が慣れないけど、面白いな。
:lastセレクタで ダグの最後にどんどん付け加えていくのポイント
:CSSで色つけもしてる.
:グワーっと一気にグループを操作するイメージ
<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>tryjquery_hide_p test</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- <script type="text/javascript" src="jquery.tablesorter.js"></script> --> <script> $(document).ready(function(){ $("p#time").html("start"); <!-- $("div").append("<table>"); --> var k=1; <!-- $.get("summary.txt", function(data){ --> $.get("summary2.txt", function(data){ <!-- $.get("data.csv", function(data){ --> $("p#time").html("reading -> split"); html=data.split("\n"); $("p#time").html("splited"); <!-- $("div.file p").html(html[1]); --> for(var i in html){ k=k+1; $("p#time").html(k+"<br>"); $("table.test tbody").append("<tr></tr>"); i2=html[i].split(","); for(var j in i2){ <!-- alert(i); --> $("table.test tbody tr:last").append("<td></td>"); $("table.test tbody tr td:last").append(i2[j]); <!-- $("table.test tbody").append(i2[j]); $("table.test tbody").append("</td>"); --> } <!-- $("table.test tbody").append("</tr>");--> } $("table.test").find("tr:odd").addClass("odd"); $("table.test").find("tr:even").addClass("even"); <!-- $("table.test tbody").append("</table>");--> }); <!-- ("#myTable").tablesorter(); --> }); </script> <style type="text/css"> table#myTable { border: 1px solid #cccccc; border-collapse: collapse; background:#fffff; } table#myTable td { border: 1px solid #cccccc; <!-- padding:10px;--> } table#myTable tr.odd td { background-color: #ffffff; padding:10px; } table#myTable tr.even td { background-color: #F6F5F0; padding:10px; } </style> </head> <body> <!-- <div class="file"> --> <p id="time"></p> <table id="myTable" class="test"> <tbody> </tbody> </table> <!-- </div> --> </body> </html>