<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>

PHNjcmlwdD4KCmFkZEV2ZW50TGlzdGVuZXIoJ0RPTUNvbnRlbnRMb2FkZWQnLCBmdW5jdGlvbigpIHsKCglkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcjbnVtYmVyJykuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbiAoKSB7bXlTb3J0KCdudW1iZXInKX0pCglkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcjbmFtZScgICkuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbiAoKSB7bXlTb3J0KCduYW1lJykgIH0pCgp9KQoKCmZ1bmN0aW9uIG15U29ydCh0eXBlKSB7CgoJdmFyIHR5cGVzICA9IFsnbnVtYmVyJywgJ25hbWUnXQoJdHlwZSA9IHR5cGVzLmluZGV4T2YodHlwZSkKCgl2YXIgdHJzICAgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKCd0YWJsZSB0Ym9keSB0cicpCgl2YXIgY29scyAgPSB0eXBlcy5tYXAoZnVuY3Rpb24gKF8sIGkpIHtyZXR1cm4gW10ubWFwLmNhbGwodHJzLCBmdW5jdGlvbiAodHIpIHtyZXR1cm4gdHIucXVlcnlTZWxlY3RvckFsbCgndGQnKVtpXX0pIH0pCgl2YXIgcm93cyAgPSBbXS5tYXAuY2FsbCh0cnMsIGZ1bmN0aW9uICh0cikge3JldHVybiB0ci5xdWVyeVNlbGVjdG9yQWxsKCd0ZCcpfSkgCgl2YXIgdGV4dHMgPSBbXS5tYXAuY2FsbChyb3dzLCBmdW5jdGlvbiAodGRzKSB7cmV0dXJuIFtdLm1hcC5jYWxsKHRkcywgZnVuY3Rpb24gKHRkKSB7cmV0dXJuIHRkLnRleHRDb250ZW50fSl9KQoKCWZ1bmN0aW9uIG9ic2VydmVyKHJlY3MpIHsKCQlyZWNzLmZvckVhY2goZnVuY3Rpb24gKHJlYykgewkJCQoJCQljb2xzLmZvckVhY2goZnVuY3Rpb24gKHRkcywgaSkgewoJCQkJdGRzW3JlYy5uYW1lXS50ZXh0Q29udGVudCA9IHRleHRzW3JlYy5uYW1lXVtpXQoJCQl9KQoJCX0pCgl9CgoJT2JqZWN0Lm9ic2VydmUodGV4dHMsIG9ic2VydmVyKTsKCgl0ZXh0cy5zb3J0KGZ1bmN0aW9uIChhLCBiKSB7CgkJT2JqZWN0LmRlbGl2ZXJDaGFuZ2VSZWNvcmRzKG9ic2VydmVyKQoJCXJldHVybiBhW3R5cGVdLmxvY2FsZUNvbXBhcmUoYlt0eXBlXSwgJ2phLXUta24tdHJ1ZScpIAoJfSkKCn0KCjwvc2NyaXB0PgoKCjx0YWJsZT4KPHRoZWFkPgo8dHI+Cjx0aD48YnV0dG9uIGlkPSJudW1iZXIiPueVquWPtzwvYnV0dG9uPjwvdGg+Cjx0aD48YnV0dG9uIGlkPSJuYW1lIj7lkI3liY08L2J1dHRvbj48L3RoPgo8L3RyPgo8L3RoZWFkPgo8dGJvZHk+Cjx0cj48dGQ+MTwvdGQ+PHRkPuOCpOOCseODq+ODu+OCq+OCt+ODvOOCuOODo+OCuTwvdGQ+PC90cj4KPHRyPjx0ZD4yPC90ZD48dGQ+44Op44OV44Kh44Ko44Or44O744O044Kh44Op44OzPC90ZD48L3RyPgo8dHI+PHRkPjM8L3RkPjx0ZD7jg5rjg5o8L3RkPjwvdHI+Cjx0cj48dGQ+NDwvdGQ+PHRkPuOCu+ODq+ODkuOCquODu+ODqeODouOCuTwvdGQ+PC90cj4KPHRyPjx0ZD41PC90ZD48dGQ+44OV44Kh44OT44Kq44O744Kz44Ko44Oz44OI44Op44OzPC90ZD48L3RyPgo8dHI+PHRkPjY8L3RkPjx0ZD7jgrXjg5/jg7vjgrHjg4fjgqPjg6k8L3RkPjwvdHI+Cjx0cj48dGQ+NzwvdGQ+PHRkPuOCr+ODquOCueODhuOCo+OCouODvOODjuODu+ODreODiuOCpuODiTwvdGQ+PC90cj4KPHRyPjx0ZD45PC90ZD48dGQ+44Kr44Oq44Og44O744OZ44Oz44K844OePC90ZD48L3RyPgo8dHI+PHRkPjExPC90ZD48dGQ+44Ks44Os44K544O744OZ44Kk44OrPC90ZD48L3RyPgo8dHI+PHRkPjEyPC90ZD48dGQ+44Oe44Or44K744OtPC90ZD48L3RyPgo8dHI+PHRkPjEzPC90ZD48dGQ+44OY44K544K544O744OV44Kn44Or44OK44Oz44OH44K5PC90ZD48L3RyPgo8dHI+PHRkPjE0PC90ZD48dGQ+44K344Oj44OT44O744Ki44Ot44Oz44K9PC90ZD48L3RyPgo8dHI+PHRkPjE1PC90ZD48dGQ+44OA44OL44Ko44Or44O744Kr44Or44OQ44OP44OrPC90ZD48L3RyPgo8dHI+PHRkPjE2PC90ZD48dGQ+44Kr44K844Of44O844OtPC90ZD48L3RyPgo8dHI+PHRkPjE3PC90ZD48dGQ+44Ki44Or44OQ44Ot44O744Ki44Or44OZ44Ot44KiPC90ZD48L3RyPgo8dHI+PHRkPjE4PC90ZD48dGQ+44OK44OB44OnPC90ZD48L3RyPgo8dHI+PHRkPjE5PC90ZD48dGQ+44Or44Kr44O744Oi44OJ44Oq44OD44OBPC90ZD48L3RyPgo8dHI+PHRkPjIwPC90ZD48dGQ+44OY44K744O744Ot44OJ44Oq44Ky44K5PC90ZD48L3RyPgo8dHI+PHRkPjIxPC90ZD48dGQ+44Ki44Or44OQ44Ot44O744Oi44Op44K/PC90ZD48L3RyPgo8dHI+PHRkPjIyPC90ZD48dGQ+44Ki44Oz44OY44Or44O744OH44Kj44O744Oe44Oq44KiPC90ZD48L3RyPgo8dHI+PHRkPjIzPC90ZD48dGQ+44Kk44K544KzPC90ZD48L3RyPgo8dHI+PHRkPjI0PC90ZD48dGQ+44Ki44K344Ko44Or44O744Kk44K444Oj44Op44Oh44Oz44OH44KjPC90ZD48L3RyPgo8dHI+PHRkPjI1PC90ZD48dGQ+44OH44Kj44Ko44K044O744Ot44Oa44K5PC90ZD48L3RyPgo8L3Rib2R5Pgo8L3RhYmxlPg==