<link rel="stylesheet" type="text/css" media="screen" href="http://maplia.jp/script/tablesorter/theme/style.css" charset="Shift_JIS" /> <style type="text/css"> 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.esy td { background-color: #cceeff; } tbody tr.std td { background-color: #ccffcc; } tbody tr.hrd td { background-color: #ffffcc; } tbody tr.mas td { background-color: #ffcccc; } tbody tr.unl td { background-color: #eebbff; } </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; var level_min = 0; var level_max = 99; var level_delta = 10; var notes_min = 0; var notes_max = 899; var notes_delta = 100; $(document).ready(function() { $.getJSON('http://revrank.maplia.jp/rev1st/api/musics?callback=?', function(data) { musics = data; table = $('#table_musics'); select_level = $('#select_level'); select_level.append($('<option/>', { value: -1, text: 'すべて' })); for (var i = level_min; i < level_max; i += level_delta) { select_level.append($('<option/>', { value: i, text: i + '~' + (i + level_delta - 1) })); } select_notes = $('#select_notes'); select_notes.append($('<option/>', { value: -1, text: 'すべて' })); for (var i = notes_min; i < notes_max; i += notes_delta) { select_notes.append($('<option/>', { value: i, text: i + '~' + (i + notes_delta - 1) })); } createMusicTable(); filterMusicTable(); }); }); 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] = { values: ['#', 'タイトル', '難易度', 'レベル', 'ノート数'] }; $.each(musics, function(i, music) { table_data.tbody[table_data.tbody.length] = { id: music.text_id + '_esy', class_name: 'esy', values: [ '-', music.full_title, 'ESY', parseInt(music.esy.level), music.esy.notes ] }; table_data.tbody[table_data.tbody.length] = { id: music.text_id + '_std', class_name: 'std', values: [ '-', music.full_title, 'STD', parseInt(music.std.level), music.std.notes ] }; table_data.tbody[table_data.tbody.length] = { id: music.text_id + '_hrd', class_name: 'hrd', values: [ '-', music.full_title, 'HRD', parseInt(music.hrd.level), music.hrd.notes ] }; table_data.tbody[table_data.tbody.length] = { id: music.text_id + '_mas', class_name: 'mas', values: [ '-', music.full_title, 'MAS', parseInt(music.mas.level), music.mas.notes ] }; if (music.unl.level) { table_data.tbody[table_data.tbody.length] = { id: music.text_id + '_unl', class_name: 'unl', values: [ '-', music.full_title, 'UNL', parseInt(music.unl.level), music.unl.notes ] }; } }); table.json2table(table_data); table.tablesorter({sortList: [[3, 1]]}); } function filterMusicTable() { diff = parseInt($(':radio[name="diff"]:checked').val()); level = parseInt($('select[name="level"]').val()); notes = parseInt($('select[name="notes"]').val()); $.each(musics, function (i, music) { if ((diff == 0) || (diff == 1)) { $('#' + music.text_id + '_esy').show(); } else { $('#' + music.text_id + '_esy').hide(); } if ((diff == 0) || (diff == 2)) { $('#' + music.text_id + '_std').show(); } else { $('#' + music.text_id + '_std').hide(); } if ((diff == 0) || (diff == 3)) { $('#' + music.text_id + '_hrd').show(); } else { $('#' + music.text_id + '_hrd').hide(); } if ((diff == 0) || (diff == 4)) { $('#' + music.text_id + '_mas').show(); } else { $('#' + music.text_id + '_mas').hide(); } if ((diff == 0) || (diff == 5)) { $('#' + music.text_id + '_unl').show(); } else { $('#' + music.text_id + '_unl').hide(); } if (level != -1) { if ((music.esy.level < level) || (music.esy.level >= level + level_delta)) { $('#' + music.text_id + '_esy').hide(); } if ((music.std.level < level) || (music.std.level >= level + level_delta)) { $('#' + music.text_id + '_std').hide(); } if ((music.hrd.level < level) || (music.hrd.level >= level + level_delta)) { $('#' + music.text_id + '_hrd').hide(); } if ((music.mas.level < level) || (music.mas.level >= level + level_delta)) { $('#' + music.text_id + '_mas').hide(); } if (music.unl.level && ((music.unl.level < level) || (music.unl.level >= level + level_delta))) { $('#' + music.text_id + '_unl').hide(); } } if (notes != -1) { if ((music.esy.notes < notes) || (music.esy.notes >= notes + notes_delta)) { $('#' + music.text_id + '_esy').hide(); } if ((music.std.notes < notes) || (music.std.notes >= notes + notes_delta)) { $('#' + music.text_id + '_std').hide(); } if ((music.hrd.notes < notes) || (music.hrd.notes >= notes + notes_delta)) { $('#' + music.text_id + '_hrd').hide(); } if ((music.mas.notes < notes) || (music.mas.notes >= notes + notes_delta)) { $('#' + music.text_id + '_mas').hide(); } if (music.unl.notes && ((music.unl.notes < notes) || (music.unl.notes >= notes + notes_delta))) { $('#' + music.text_id + '_unl').hide(); } } }); } </script> <p> 難易度フィルター: <label><input type="radio" name="diff" value="0" onchange="filterMusicTable()" checked="checked"> 全譜面</label> <label><input type="radio" name="diff" value="1" onchange="filterMusicTable()"> EASY</label> <label><input type="radio" name="diff" value="2" onchange="filterMusicTable()"> STANDARD</label> <label><input type="radio" name="diff" value="3" onchange="filterMusicTable()"> HARD</label> <label><input type="radio" name="diff" value="4" onchange="filterMusicTable()"> MASTER</label> <label><input type="radio" name="diff" value="5" onchange="filterMusicTable()"> UNLIMITED</label> </p> <p> レベルフィルター: <select id="select_level" name="level" onchange="filterMusicTable()"></select> / ノート数フィルター: <select id="select_notes" name="notes" onchange="filterMusicTable()"/></select> </p> <table id="table_musics" class="tablesorter style_table" cellspacing="1" border="0"></table>