- 追加された行はこの色です。
- 削除された行はこの色です。
<link rel="stylesheet" type="text/css" media="screen" href="http://maplia.jp/script/tablesorter/theme/style.css" charset="Shift_JIS" />
<style type="text/css">
thead.header {
tbody tr th {
padding: 0 5px;
}
tbody tr td.number {
text-align: center;
}
tbody tr td.mark {
text-align: center;
}
tbody tr td.text {
text-align: left;
}
tbody tr.bsc td {
background-color: #ccffcc;
}
tbody tr.adv td {
background-color: #ffffcc;
}
tbody tr.ext td {
background-color: #ffcccc;
}
</style>
<script type="text/javascript" src="http://maplia.jp/script/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="http://maplia.jp/script/jquery.json2table.js"></script>
<script type="text/javascript">
var musics;
var table;
$(document).ready(function() {
$.getJSON('http://cxbrank.maplia.jp/api/musics?callback=?', function(data) {
musics = data;
table = $('#table_musics');
createMusicTable(0);
createMusicTable();
if ($(':text[name="filter"]').val() != undefined) {
filterMusicTable($(':text[name="filter"]').val());
} else {
filterMusicTable(0);
}
});
});
function createMusicTable(diff) {
table.json2table({});
table.trigger("update");
function createMusicTable() {
var table_data = {};
table_data.thead_column_classes = [
'style_th', 'style_th', 'style_th', 'style_th', 'style_th'
];
table_data.tbody_column_classes = [
'style_th', 'text', 'mark', 'number', 'number'
];
table_data.thead = [];
table_data.tbody = [];
table_data.thead[0] = {
class_name: 'style_th',
values: ['#', 'タイトル', '難易度', 'レベル', 'ノート数']
};
$.each(musics, function(i, music) {
table_data.tbody[table_data.tbody.length] = {
id: music.text_id + '_bsc',
class_name: 'bsc',
values: [
music.number, music.title, 'STD',
new Number(music.bsc.level).toFixed(1), music.bsc.notes
]
};
table_data.tbody[table_data.tbody.length] = {
id: music.text_id + '_adv',
class_name: 'adv',
values: [
music.number, music.title, 'HRD',
new Number(music.adv.level).toFixed(1), music.adv.notes
]
};
table_data.tbody[table_data.tbody.length] = {
id: music.text_id + '_ext',
class_name: 'ext',
values: [
music.number, music.title, 'MAS',
new Number(music.ext.level).toFixed(1), music.ext.notes
]
};
});
table.json2table(table_data);
table.tablesorter({sortList: [[3, 1]]});
}
function filterMusicTable(diff) {
$.each(musics, function (i, music) {
if ((diff == 0) || (diff == 1)) {
table_data.tbody[table_data.tbody.length] = {
class_name: 'bsc',
values: [
music.number, music.title, 'STD',
new Number(music.bsc.level).toFixed(1), music.bsc.notes
]
};
$('#' + music.text_id + '_bsc').show();
} else {
$('#' + music.text_id + '_bsc').hide();
}
if ((diff == 0) || (diff == 2)) {
table_data.tbody[table_data.tbody.length] = {
class_name: 'adv',
values: [
music.number, music.title, 'HRD',
new Number(music.adv.level).toFixed(1), music.adv.notes
]
};
$('#' + music.text_id + '_adv').show();
} else {
$('#' + music.text_id + '_adv').hide();
}
if ((diff == 0) || (diff == 3)) {
table_data.tbody[table_data.tbody.length] = {
class_name: 'ext',
values: [
music.number, music.title, 'MAS',
new Number(music.ext.level).toFixed(1), music.ext.notes
]
};
$('#' + music.text_id + '_ext').show();
} else {
$('#' + music.text_id + '_ext').hide();
}
});
table.json2table(table_data);
table.trigger("update");
table.tablesorter({sortList: [[3, 1]]});
}
</script>
<p>
<label><input type="radio" name="filt" onchange="createMusicTable(0)" checked="checked"> 全譜面</label>
<label><input type="radio" name="filt" onchange="createMusicTable(1)"> STANDARD</label>
<label><input type="radio" name="filt" onchange="createMusicTable(2)"> HARD</label>
<label><input type="radio" name="filt" onchange="createMusicTable(3)"> MASTER</label>
難易度フィルター:
<label><input type="radio" name="filter" onchange="filterMusicTable(0)" checked="checked"> 全譜面</label>
<label><input type="radio" name="filter" onchange="filterMusicTable(1)"> STANDARD</label>
<label><input type="radio" name="filter" onchange="filterMusicTable(2)"> HARD</label>
<label><input type="radio" name="filter" onchange="filterMusicTable(3)"> MASTER</label>
</p>
<table id="table_musics" class="tablesorter" cellspacing="1" border="0"></table>
<table id="table_musics" class="tablesorter style_table" cellspacing="1" border="0"></table>