css 檔案：@charset "utf-8";
-webkit-user-select: none;

css程式碼：
thead th.curs:hover {  // 讓有 curs類的 th 滑鼠劃過進滑鼠變化
	cursor: pointer;
}
cellspacing="0" cellpadding="0"  // 單元格之間有間隙，設定為 0後無

引入外部 js ， 加上 charset ; js 引入順序的問題 require.js
<script src="utils.js" type="text/javascript" charset="utf-8"></
 
script>

用 ajax 取來的資料是亂碼的話，（這裡是請求的 proData.txt 檔案）
開啟檔案，檔案 =》另存為 =》編碼選擇為 UTF-8
得到的是字串，轉換為陣列 eval
先把資料繫結好，再新增樣式（新增類名），事件

繫結資料：

var data = null; // 用於儲存取回來的資料
// 1 先獲取 proData.txt 中的資料 -》 JSON 格式的字串
// 2 實現資料繫結
var xhr = new XMLHttpRequest;
xhr.open('get','proData.txt',true); // 非同步   false 同步（請求資料完成之後才執行後面的程式碼 ）
 

xhr.onreadystatechange = function(){
	if(xhr.readyState ===4 && xhr.status == 200){
		data = eval(xhr.responseText);  // 轉換為陣列  解析資料
		tbody.innerHTML = joinDate(data); // 新增到頁面
	}
}
xhr.send(null);

function joinDate(data){   // 拼接字串
		var str = '';
		for( var i=0; i<data.length; i++){
			str +=
 
'<tr><td>'+ data[i].name+'</td>\<td>'+data[i].age+'</td><td>'+data[i].score+'</td><td>'+( data[i].sex ? '女' : '男')+'</td></tr>';
		}
		return str;
}
var flag = -1;
//資料 排序
function sortData(attr){
	data.sort(function(a,b){
		return (a[attr]-b[attr])*flag;
	});
	flag = -flag;
	tbody.innerHTML = joinDate(data);
}
function ageSort(){   //點選年齡時呼叫
	sortData('age');
}
function scoreSort(){  // 點選武力值時呼叫
	sortData('score'); 
}

繫結資料最好是寫成一個方法，每次點選後，先將資料排序，再新增到頁面
事件： html 中 onclick = 'xxx()'

教程：

資料單獨處理： 0 顯示 男， 1 顯示 女

用 webstorm 如果出現亂碼，修改如下：

還要將檔案重新複製一份

sort 方法，在最後還要再呼叫一下隔行變色的方法
重新新增到 tBody 中，直接新增（DOM 對映）
oThs[i].flag = 1; // 給當前點選的元素新增一個自定義屬性

實現多列排序：

在排序方法中，要另考慮排序的是字串的情況，修改

最後的優化：互動點選後，再佔某一列不是進行升序排序，所以，點選某一項後，要將其它項的 flag 值重置