01647

ustreamer-01647

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