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 值重置