jQueryでTSVファイルを表示した
メモ
- ジョンが示しているコードについて,th部分を中括弧に収めているのなぜ?
- jquery-uiは未だ使っていないけど気にすんな
- tbodyが自動挿入されるが,theadは違った.書いて打開
- fezskill.jsは未だ白紙
コード
index.html
<!DOCTYPE html> <html> <head> <title>fezskill Table</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <script type="text/javascript" src="js/libs/jquery/jquery.js"></script> <script type="text/javascript" src="js/libs/jqueryui/jquery-ui.js"></script> <script type="text/javascript" src="js/jquery.parse.min.js"></script> <script type="text/javascript" src="js/fezskill.js"></script> <style>table, th, td {border: solid 1px black;}</style> <script type="text/javascript"> $(document).ready(function() { $.ajax("table/warrior.tsv", { dataType: 'text', error: function(jqXHR, textStatus, errorThrown) { console.log("file not found", textStatus); }, success: function(data) { var res = $.parse(data, { header: true }).results; var table = $("<table />").appendTo($("#tsv")); // table header var thead = $("<thead />"); thead.appendTo(table); var tr = $("<tr />"); tr.appendTo(thead); res.fields.forEach(function(col) { tr.append($("<th />", {"text": col})); }); // table body res.rows.forEach(function(row) { var tr = $("<tr />"); tr.appendTo(table); res.fields.forEach(function(col) { tr.append($("<td />", {"text": row[col]})); }); }); }, async: false }); }); </script> </head> <body> <div id="tsv"></div> </body> </html>
warrior.tsv
id name levels preSkills level1 level2 level3 description normal 基本攻撃 1 enderpain エンダーペイン 1 sonicboom ソニックブーム 3 2 1 1 forceimpact フォースインパクト 3 sonicboom 3 1 1 crumblestorm クランブルストーム 3 forceimpact 3 2 2 blazeslash ブレイズスラッシュ 3 2 1 1 srumattack スラムアタック 3 blazeslash 2 1 1 earthstamp アーススタンプ 3 srumattack 2 2 2 guardrainforce ガードレインフォース 3 blazeslash 2 1 1 shieldbash シールドバッシュ 3 guardrainforce 2 2 2 smash スマッシュ 3 2 1 1 strikesmash ストライクスマッシュ 3 smash 2 1 1 heavysmash ヘビースマッシュ 3 strikesmash 2 2 2 behemostail ベヒモステイル 3 smash 2 1 1 dragontail ドラゴンテイル 3 behemostail 2 2 2 extendblade エクステンブレイド 3 smash 2 1 1 swordrampage ソードランページ 3 extendblade 2 2 2 attackrainforce アタックレインフォース 3 smash 2 1 1