4
this tableを使用して、.csvファイルから読み込まれたデータを含むテーブルを表示しようとしています。.csvからデータテーブルにデータをロードする方法は？
.csvからデータをthis tableにロードする方法はありますか？条件付き書式設定は可能ですか？
ありがとうございます！
以下のコードは、これまでのところ可能でしたが、テーブル本体<tbody>はテーブルから切り離されています。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="1000">
<!-- REFRESH EVERY 2 minutes -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://papaparse.com/resources/js/papaparse.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_table.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js"></script>
<style type="text/css">
</style>
<title>HTML TABLE FROM .CSV DATA SOURCE</title>
</head>
<body>
<script>
//Setting data.csv as data source to be loaded into table id="example"
$(function() {
Papa.parse("data.csv", {
download: true,
complete: function(example) {
console.log("Remote file parsed!", example.data);
$.each(example.data, function(i, el) {
var row = $("<tr/>");
row.append($("<td/>").text(i));
$.each(el, function(j, cell) {
if (cell !== "")
row.append($("<td/>").text(cell));
});
$("#example tbody").append(row);
});
}
});
});
</script>
<script type='text/javascript'>
//Conditionally formating. Where North office are red and South office are green
//<![CDATA[
$(window).load(function() {
$('#example').dataTable({
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
switch (aData[0]) {
case 'North':
$(nRow).css('color', 'red')
break;
case 'South':
$(nRow).css('color', 'green')
break;
}
}
});
}); //]]>
</script>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>