※単に自分用メモです。
jQueryと、ｊQuery Parse Pluginを使う。
http://plugins.jquery.com/parse/
最初はパース部分は作るつもりで、周辺だけjQueryを使ってみようと思ったのだが、何かあったので。
試したサンプル。良い感じ。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="./lib/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="./lib/jquery.parse.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
var tsv = 'ID\tDA（カンマ含む） \tDB（改行含む）\t数値型\t凸凹\n\
L1\tDA,1\t"DB1\n\
multiline"\t1\t+\n\
L2\tDA,2\tDB2\t2\t\n\
L3\tDA,3\tDB3\t3\t+\n\
\tDA,4\tDB4\t4\t\n\
\tDA,5\tDB5\t5\t+\n\
L6\tDA,6\tDB6\t6\t\n\
';
var csv = 'ID,DA（カンマ含む）,DB（改行含む）,数値型,凸凹\n\
L1,"DA,1","DB1\n\
multiline",1,+\n\
L2,"DA,2",DB2,2,\n\
L3,"DA,3",DB3,3,+\n\
,"DA,4",DB4,4,\n\
,"DA,5",DB5,5,+\n\
L6,"DA,6",DB6,6,';
function test(data, delim){
$("#data").text(data);
var res = parseText(data,delim);
var table = $("<table />").appendTo($("#res"));
{
var tr = $("<tr />");
tr.appendTo(table);
res.results.fields.forEach(function(col){
tr.append($("<th />", {"text":col}));
});
}
res.results.rows.forEach(function(row){
var tr = $("<tr />");
tr.appendTo(table);
res.results.fields.forEach(function(col){
tr.append($("<td />", {"text":row[col]}));
});
});
}
function parseText(data, delim){
return $.parse(data, {delimiter:delim, header:true, dynamicTyping :true});
}
</script>
<style type="text/css">
#data{
white-space:pre-wrap;
border:1px solid #ccc;
font-size:75%;
}
#res table{
border:1px solid #666;
}
#res table td{
border:1px solid #999;
white-space:pre-wrap;
}
</style>
</head>
<body>
<button onclick="test(tsv, '\t')">TSV</button>
<button onclick="test(csv, ',')">CSV</button>
<div id="data"></div>
<div id="res"></div>
</body>
</html>
0 件のコメント:
コメントを投稿