<link rel="stylesheet" type="text/css" media="screen" href="https://marines.sakura.ne.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; } </style> <script type="text/javascript" src="https://marines.sakura.ne.jp/script/jquery.tablesorter.min.js"></script> <script type="text/javascript" src="https://marines.sakura.ne.jp/script/jquery.json2table.js"></script> <script type="text/javascript"> var musics; var table; var level_min = 1; var level_max = 399; var level_delta = 50; var notes_min = 0; var notes_max = 1399; var notes_delta = 100; $(document).ready(function() { $.getJSON('https://library.maplia.jp/json/musics_polytone.json', 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 == 1 ? -1 : i) + (level_delta == 1 ? '' : '~' + (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) { if (music.music_deleted) { return true; } const charts = { 'bsc': music.basic, 'adv': music.advanced, 'hrd': music.hard, 'exp': music.expert }; const full_title = music.title + (typeof music.subtitle === "undefined" ? '' : ' <small>' + music.subtitle + '</small>'); $.each(charts, function(key, chart) { if (typeof chart === 'undefined') { return true; } if (chart.level) { const class_name = 'chart_pt_' + (chart.level == -1 ? 'chs' : key); const number = '-'; table_data.tbody[table_data.tbody.length] = { id: music.id + '_' + key, class_name: class_name, values: [ number, full_title, key, chart.level, chart.notes ] }; } }); }); table.json2table(table_data); table.tablesorter({sortList: [[3, 1]]}); } function filterMusicTable() { const mode = parseInt($(':radio[name="mode"]:checked').val()); const diff = parseInt($(':radio[name="diff"]:checked').val()); const level = parseInt($('select[name="level"]').val()); const notes = parseInt($('select[name="notes"]').val()); let count = 0; $('#table_musics tbody tr').each(function (i, item) { const item_level = parseInt($(item).find('td')[2].innerText); const item_notes = parseInt($(item).find('td')[3].innerText); $(item).show(); // 難易度フィルタ if (item.id.indexOf('_bsc') > -1 && ![0, 1].includes(diff)) { $(item).hide(); return true; } if (item.id.indexOf('_adv') > -1 && ![0, 2].includes(diff)) { $(item).hide(); return true; } if (item.id.indexOf('_hrd') > -1 && ![0, 3].includes(diff)) { $(item).hide(); return true; } if (item.id.indexOf('_exp') > -1 && ![0, 4].includes(diff)) { $(item).hide(); return true; } // レベルフィルタ if ((level != -1) && (item_level < (level == 1 ? -1 : level) || (item_level >= level + level_delta))) { $(item).hide(); return true; } // ノート数フィルタ if ((notes != -1) && (item_notes < notes || (item_notes >= notes + notes_delta))) { $(item).hide(); return true; } count++; }); if (count <= 0) { $('#table_rows').text('フィルター条件に該当する譜面はありません'); } else { $('#table_rows').text(count + '譜面が該当しました'); } } </script> <div> <p> 難易度フィルター: <label><input type="radio" name="diff" value="0" onchange="filterMusicTable()" checked="checked"> 全譜面</label> <label><input type="radio" name="diff" value="1" onchange="filterMusicTable()"> basic</label> <label><input type="radio" name="diff" value="2" onchange="filterMusicTable()"> advanced</label> <label><input type="radio" name="diff" value="3" onchange="filterMusicTable()"> hard</label> <label><input type="radio" name="diff" value="4" onchange="filterMusicTable()"> expert</label> </p> <p> レベルフィルター: <select id="select_level" name="level" onchange="filterMusicTable()"></select> / ノート数フィルター: <select id="select_notes" name="notes" onchange="filterMusicTable()"></select> </p> <p id="table_rows"></p> <table id="table_musics" class="tablesorter style_table" cellspacing="1" border="0"></table> </div> IP:113.145.197.102 TIME:"2020-11-15 (日) 19:33:25" REFERER:"https://wiki.maplia.jp/" USER_AGENT:"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:82.0) Gecko/20100101 Firefox/82.0"