<!DOCTYPE html>
<html>
<head>
<title>表格正逆序排列</title>
<meta charset="utf-8">
<style type="text/css">
table{
width:400px;
height:200px;
border:1px solid #000;
border-collapse:collapse;
position:relative;/*这里有没有position达到的效果都一样*/
}
th,td{
width:25%;
height:20%;
border:1px solid #000;
}
th{background-color:grey;}
</style>
</head>
<body>
<table id="table"> <!--id的取名可以与标签名相同 -->
<thead>
<tr>
<th>姓名</th>
<th>力量</th>
<th>敏捷</th>
<th>智力</th>
</tr>
</thead>
<tbody>
<tr>
<td>d德鲁伊</td>
<td>17</td>
<td>24</td>
<td>13</td>
</tr>
<tr>
<td>y月之骑士</td>
<td>15</td>
<td>22</td>
<td>16</td>
</tr>
<tr>
<td>z众神之王</td>
<td>19</td>
<td>15</td>
<td>20</td>
</tr>
<tr>
<td>l流浪剑客</td>
<td>23</td>
<td>15</td>
<td>14</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var table = document.getElementById("table");
//变量的取名可以与html中标签名相同,是Id而不是ID
var th = table.getElementsByTagName("th");
//取得标题 table.getElementByTagName与document.效果是一样的,为了更好的扩展性,这里用table.
var tb = table.getElementsByTagName("tbody")[0];
var tbTr = tb.getElementsByTagName("tr");
//取得表格中的每一行。因为后面需要一行行的复制
//getElementById 的Element没有s, getElementsbyTagName的Elements有s
function sortTable(_i){//使用_i是为了区别ith[_i].onclick = function(){
//只有点击后才执行以下内容var selectCol=[]; //把选定的列存入此数组中,存的是内容var copytr=[];
//把需要排列的表格数据复制到此数组中,存的是节点for(var j=0; j<tbTr.length; j++){selectCol.push(tbTr[j].getElementsByTagName("td")[_i].innerText);copytr.push(tbTr[j].cloneNode(true));
//cloneNode() 方法克隆所有属性以及它们的值。}//排序if(!isSort[_i]){isSort[_i]=true;var t=parseInt(selectCol[0]) || selectCol[0];
//有可能是字符串型的数字if(typeof(t)=='number'){
//判断为数字还是字符串,typeof的of为小写,selectCol.sort(function(a,b){return(a-b)});}else{selectCol.sort();}
//并不是按照拼音排序}else{isSort[_i]=false;selectCol.reverse();}console.log(selectCol);//清空原tbvar tbTrlength=tbTr.length;
//必须要这一行,因为tbTr.length会随着删除而改变for(var k=0;k<tbTrlength;k++){tb.removeChild(tbTr[0]);
//总共要删除tbTr.length-1行,删除一行少一行,所以每次删的都是【0】行}console.log(tb);//重新给tb添加排序好的内容for(var x=0;x<selectCol.length;x++){for(var y=0;y<copytr.length;y++){if(selectCol[x]==copytr[y].getElementsByTagName("td")[_i].innerHTML){tb.appendChild(copytr[y]);}}} }}var isSort=[];for(var
i=0; i<th.length; i++){isSort[i]=false; //设置标志,用来判断是正序还是逆序排列sortTable(i);
//调用sortTable}</script></body></html>