table表格排序 纯JavaScript 无Jquery 图片、整数 、小数、字符串、日期排序

<script type="text/javascript">
var IsAsc = true;
function SortTable(id, key, type) {
    var imgSort = document.getElementById('key' + key);
    if (IsAsc == true) {
        imgSort.src = 'http://nbd.lt/down.png'
    } else {
        imgSort.src = 'http://nbd.lt/up.png'
    }
    IsAsc = !IsAsc;
    var DTable = document.getElementById(id);
    var DBody = DTable.tBodies[0];
    var DataRows = DBody.rows;
    var MyArr = new Array;
    for (var i = 0; i < DataRows.length; i++) {
        MyArr[i] = DataRows[i]
    }
    if (DBody.CurrentKey == key) {
        MyArr.reverse()
    } else {
        MyArr.sort(CustomCompare(key, type))
    }
    var frag = document.createDocumentFragment();
    for (var i = 0; i < MyArr.length; i++) {
        frag.appendChild(MyArr[i])
    }
    DBody.appendChild(frag);
    DBody.CurrentKey = key
}
function CustomCompare(key, type) {
    return function CompareTRs(TR1, TR2) {
        var value1, value2;
        if (TR1.cells[key].getAttribute("customvalue")) {
            value1 = convert(TR1.cells[key].getAttribute("customvalue"), type);
            value2 = convert(TR2.cells[key].getAttribute("customvalue"), type)
        } else {
            value1 = convert(TR1.cells[key].firstChild.nodeValue, type);
            value2 = convert(TR2.cells[key].firstChild.nodeValue, type)
        }
        if (value1 < value2) return - 1;
        else if (value1 > value2) return 1;
        else return 0
    }
}
function convert(value, type) {
    switch (type) {
    case true:
        return parseFloat(value);
    default:
        return value.toString()
    }
}
</script>
</head>
<body>
<table border="1" id="t1">
  <thead>
    <tr>
      <td onclick="SortTable('t1',0)" style="cursor:pointer">图片排序 <img id="key0" src="http://nbd.lt/up.png" /></td>
      <td onclick="SortTable('t1',1,true)" style="cursor:pointer">整数排序 <img id="key1" src="http://nbd.lt/up.png" /></td>
      <td onclick="SortTable('t1',2,true)" style="cursor:pointer">浮点数排序<img id="key2" src="http://nbd.lt/up.png" /></td>
      <td onclick="SortTable('t1',3)" style="cursor:pointer">字符串排序<img id="key3" src="http://nbd.lt/up.png" /></td>
      <td onclick="SortTable('t1',4)" style="cursor:pointer">日期排序 <img id="key4" src="http://nbd.lt/up.png" /></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td customvalue="up"><img src="http://nbd.lt/up.png" /></td>
      <td>2</td>
      <td>5.4</td>
      <td>http://my.oschina.net/cart/blog?catalog=397331</td>
      <td>2013-10-31 14:33:13</td>
    </tr>
    <tr>
      <td customvalue="up"><img src="http://nbd.lt/up.png" /></td>
      <td>267</td>
      <td>8.9</td>
      <td>http://my.oschina.net/cart/blog?catalog=397329</td>
      <td>2011-10-31 14:33:13</td>
    </tr>
    <tr>
      <td customvalue="down"><img src="http://nbd.lt/down.png" /></td>
      <td>6</td>
      <td>60.4</td>
      <td>http://my.oschina.net/cart/blog?catalog=495952</td>
      <td>2005-10-31 14:33:13</td>
    </tr>
  </tbody>
</table>



你可能感兴趣的:(图片排序、整数排序,table表格排序,纯JavaScript表格排序,无Jquery表格排序)