<script>
 
addEventListener('DOMContentLoaded', function() {
 
	document.querySelector('#number').addEventListener('click', function () {mySort('number')})
	document.querySelector('#name'  ).addEventListener('click', function () {mySort('name')  })
 
})
 
 
function mySort(type) {
 
	var types  = ['number', 'name']
	type = types.indexOf(type)
 
	var trs   = document.querySelectorAll('table tbody tr')
	var cols  = types.map(function (_, i) {return [].map.call(trs, function (tr) {return tr.querySelectorAll('td')[i]}) })
	var rows  = [].map.call(trs, function (tr) {return tr.querySelectorAll('td')}) 
	var texts = [].map.call(rows, function (tds) {return [].map.call(tds, function (td) {return td.textContent})})
 
	function observer(recs) {
		recs.forEach(function (rec) {			
			cols.forEach(function (tds, i) {
				tds[rec.name].textContent = texts[rec.name][i]
			})
		})
	}
 
	Object.observe(texts, observer);
 
	texts.sort(function (a, b) {
		Object.deliverChangeRecords(observer)
		return a[type].localeCompare(b[type], 'ja-u-kn-true') 
	})
 
}
 
</script>
 
 
<table>
<thead>
<tr>
<th><button id="number">番号</button></th>
<th><button id="name">名前</button></th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>イケル・カシージャス</td></tr>
<tr><td>2</td><td>ラファエル・ヴァラン</td></tr>
<tr><td>3</td><td>ペペ</td></tr>
<tr><td>4</td><td>セルヒオ・ラモス</td></tr>
<tr><td>5</td><td>ファビオ・コエントラン</td></tr>
<tr><td>6</td><td>サミ・ケディラ</td></tr>
<tr><td>7</td><td>クリスティアーノ・ロナウド</td></tr>
<tr><td>9</td><td>カリム・ベンゼマ</td></tr>
<tr><td>11</td><td>ガレス・ベイル</td></tr>
<tr><td>12</td><td>マルセロ</td></tr>
<tr><td>13</td><td>ヘスス・フェルナンデス</td></tr>
<tr><td>14</td><td>シャビ・アロンソ</td></tr>
<tr><td>15</td><td>ダニエル・カルバハル</td></tr>
<tr><td>16</td><td>カゼミーロ</td></tr>
<tr><td>17</td><td>アルバロ・アルベロア</td></tr>
<tr><td>18</td><td>ナチョ</td></tr>
<tr><td>19</td><td>ルカ・モドリッチ</td></tr>
<tr><td>20</td><td>ヘセ・ロドリゲス</td></tr>
<tr><td>21</td><td>アルバロ・モラタ</td></tr>
<tr><td>22</td><td>アンヘル・ディ・マリア</td></tr>
<tr><td>23</td><td>イスコ</td></tr>
<tr><td>24</td><td>アシエル・イジャラメンディ</td></tr>
<tr><td>25</td><td>ディエゴ・ロペス</td></tr>
</tbody>
</table>