<script>
 
NodeList.prototype.map = [].map
 
 
function sortFunc(a, b) {
 
	return a.localeCompare(b, 'ja-u-kn-true') 
 
}
 
 
addEventListener('DOMContentLoaded', function() {
 
	document.querySelector('#number').addEventListener('click', function () {mySort('number', sortFunc)})
	document.querySelector('#name'  ).addEventListener('click', function () {mySort('name'  , sortFunc)})
 
})
 
 
 
function mySort(type, sortFunc) {
 
	var types  = ['number', 'name']
	type = types.indexOf(type)
 
	var trs   = document.querySelectorAll('table tbody tr')
	var cols  = types.map(function (_, i) {return trs.map(function (tr) {return tr.querySelectorAll('td')[i]}) })
	var rows  = trs.map(function (tr) {return tr.querySelectorAll('td')}) 
	var texts = rows.map(function (tds) {return tds.map(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 sortFunc(a[type], b[type])
	})
 
}
 
</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>

PHNjcmlwdD4KCk5vZGVMaXN0LnByb3RvdHlwZS5tYXAgPSBbXS5tYXAKCgpmdW5jdGlvbiBzb3J0RnVuYyhhLCBiKSB7CgoJcmV0dXJuIGEubG9jYWxlQ29tcGFyZShiLCAnamEtdS1rbi10cnVlJykgCgp9CgoKYWRkRXZlbnRMaXN0ZW5lcignRE9NQ29udGVudExvYWRlZCcsIGZ1bmN0aW9uKCkgewoKCWRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNudW1iZXInKS5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZ1bmN0aW9uICgpIHtteVNvcnQoJ251bWJlcicsIHNvcnRGdW5jKX0pCglkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcjbmFtZScgICkuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbiAoKSB7bXlTb3J0KCduYW1lJyAgLCBzb3J0RnVuYyl9KQoKfSkKCgoKZnVuY3Rpb24gbXlTb3J0KHR5cGUsIHNvcnRGdW5jKSB7CgoJdmFyIHR5cGVzICA9IFsnbnVtYmVyJywgJ25hbWUnXQoJdHlwZSA9IHR5cGVzLmluZGV4T2YodHlwZSkKCgl2YXIgdHJzICAgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKCd0YWJsZSB0Ym9keSB0cicpCgl2YXIgY29scyAgPSB0eXBlcy5tYXAoZnVuY3Rpb24gKF8sIGkpIHtyZXR1cm4gdHJzLm1hcChmdW5jdGlvbiAodHIpIHtyZXR1cm4gdHIucXVlcnlTZWxlY3RvckFsbCgndGQnKVtpXX0pIH0pCgl2YXIgcm93cyAgPSB0cnMubWFwKGZ1bmN0aW9uICh0cikge3JldHVybiB0ci5xdWVyeVNlbGVjdG9yQWxsKCd0ZCcpfSkgCgl2YXIgdGV4dHMgPSByb3dzLm1hcChmdW5jdGlvbiAodGRzKSB7cmV0dXJuIHRkcy5tYXAoZnVuY3Rpb24gKHRkKSB7cmV0dXJuIHRkLnRleHRDb250ZW50fSkgfSkKCglmdW5jdGlvbiBvYnNlcnZlcihyZWNzKSB7CgkJcmVjcy5mb3JFYWNoKGZ1bmN0aW9uIChyZWMpIHsJCQkKCQkJY29scy5mb3JFYWNoKGZ1bmN0aW9uICh0ZHMsIGkpIHsKCQkJCXRkc1tyZWMubmFtZV0udGV4dENvbnRlbnQgPSB0ZXh0c1tyZWMubmFtZV1baV0KCQkJfSkKCQl9KQoJfQoKCU9iamVjdC5vYnNlcnZlKHRleHRzLCBvYnNlcnZlcikKCgl0ZXh0cy5zb3J0KGZ1bmN0aW9uKGEsIGIpIHsKCQlPYmplY3QuZGVsaXZlckNoYW5nZVJlY29yZHMob2JzZXJ2ZXIpCgkJcmV0dXJuIHNvcnRGdW5jKGFbdHlwZV0sIGJbdHlwZV0pCgl9KQoKfQoKPC9zY3JpcHQ+CgoKPHRhYmxlPgo8dGhlYWQ+Cjx0cj4KPHRoPjxidXR0b24gaWQ9Im51bWJlciI+55Wq5Y+3PC9idXR0b24+PC90aD4KPHRoPjxidXR0b24gaWQ9Im5hbWUiPuWQjeWJjTwvYnV0dG9uPjwvdGg+CjwvdHI+CjwvdGhlYWQ+Cjx0Ym9keT4KPHRyPjx0ZD4xPC90ZD48dGQ+44Kk44Kx44Or44O744Kr44K344O844K444Oj44K5PC90ZD48L3RyPgo8dHI+PHRkPjI8L3RkPjx0ZD7jg6njg5XjgqHjgqjjg6vjg7vjg7TjgqHjg6njg7M8L3RkPjwvdHI+Cjx0cj48dGQ+MzwvdGQ+PHRkPuODmuODmjwvdGQ+PC90cj4KPHRyPjx0ZD40PC90ZD48dGQ+44K744Or44OS44Kq44O744Op44Oi44K5PC90ZD48L3RyPgo8dHI+PHRkPjU8L3RkPjx0ZD7jg5XjgqHjg5Pjgqrjg7vjgrPjgqjjg7Pjg4jjg6njg7M8L3RkPjwvdHI+Cjx0cj48dGQ+NjwvdGQ+PHRkPuOCteODn+ODu+OCseODh+OCo+ODqTwvdGQ+PC90cj4KPHRyPjx0ZD43PC90ZD48dGQ+44Kv44Oq44K544OG44Kj44Ki44O844OO44O744Ot44OK44Km44OJPC90ZD48L3RyPgo8dHI+PHRkPjk8L3RkPjx0ZD7jgqvjg6rjg6Djg7vjg5njg7Pjgrzjg548L3RkPjwvdHI+Cjx0cj48dGQ+MTE8L3RkPjx0ZD7jgqzjg6zjgrnjg7vjg5njgqTjg6s8L3RkPjwvdHI+Cjx0cj48dGQ+MTI8L3RkPjx0ZD7jg57jg6vjgrvjg608L3RkPjwvdHI+Cjx0cj48dGQ+MTM8L3RkPjx0ZD7jg5jjgrnjgrnjg7vjg5Xjgqfjg6vjg4rjg7Pjg4fjgrk8L3RkPjwvdHI+Cjx0cj48dGQ+MTQ8L3RkPjx0ZD7jgrfjg6Pjg5Pjg7vjgqLjg63jg7Pjgr08L3RkPjwvdHI+Cjx0cj48dGQ+MTU8L3RkPjx0ZD7jg4Djg4vjgqjjg6vjg7vjgqvjg6vjg5Djg4/jg6s8L3RkPjwvdHI+Cjx0cj48dGQ+MTY8L3RkPjx0ZD7jgqvjgrzjg5/jg7zjg608L3RkPjwvdHI+Cjx0cj48dGQ+MTc8L3RkPjx0ZD7jgqLjg6vjg5Djg63jg7vjgqLjg6vjg5njg63jgqI8L3RkPjwvdHI+Cjx0cj48dGQ+MTg8L3RkPjx0ZD7jg4rjg4Hjg6c8L3RkPjwvdHI+Cjx0cj48dGQ+MTk8L3RkPjx0ZD7jg6vjgqvjg7vjg6Ljg4njg6rjg4Pjg4E8L3RkPjwvdHI+Cjx0cj48dGQ+MjA8L3RkPjx0ZD7jg5jjgrvjg7vjg63jg4njg6rjgrLjgrk8L3RkPjwvdHI+Cjx0cj48dGQ+MjE8L3RkPjx0ZD7jgqLjg6vjg5Djg63jg7vjg6Ljg6njgr88L3RkPjwvdHI+Cjx0cj48dGQ+MjI8L3RkPjx0ZD7jgqLjg7Pjg5jjg6vjg7vjg4fjgqPjg7vjg57jg6rjgqI8L3RkPjwvdHI+Cjx0cj48dGQ+MjM8L3RkPjx0ZD7jgqTjgrnjgrM8L3RkPjwvdHI+Cjx0cj48dGQ+MjQ8L3RkPjx0ZD7jgqLjgrfjgqjjg6vjg7vjgqTjgrjjg6Pjg6njg6Hjg7Pjg4fjgqM8L3RkPjwvdHI+Cjx0cj48dGQ+MjU8L3RkPjx0ZD7jg4fjgqPjgqjjgrTjg7vjg63jg5rjgrk8L3RkPjwvdHI+CjwvdGJvZHk+CjwvdGFibGU+