<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.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(); if ($(':text[name="filter"]').val() != undefined) { filterMusicTable($(':text[name="filter"]').val()); } else { filterMusicTable(0); } }); }); 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 + '_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)) { $('#' + music.text_id + '_bsc').show(); } else { $('#' + music.text_id + '_bsc').hide(); } if ((diff == 0) || (diff == 2)) { $('#' + music.text_id + '_adv').show(); } else { $('#' + music.text_id + '_adv').hide(); } if ((diff == 0) || (diff == 3)) { $('#' + music.text_id + '_ext').show(); } else { $('#' + music.text_id + '_ext').hide(); } }); } </script> <p> 難易度フィルター: <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 style_table" cellspacing="1" border="0"></table>