自定义table，js实现数组排序功能

最新推荐文章于 2024-07-22 15:23:05 发布

wsfzj123

最新推荐文章于 2024-07-22 15:23:05 发布

阅读量414

点赞数

本文链接：https://blog.csdn.net/wsfzj123/article/details/80640011

版权

<!DOCTYPE html>
<html>

  </table>
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
  var data = [{
   "id": 2,
   "name": "哈哈"
  }, {
   "id": 1,
   "name": "哈哈"
  }, {
   "id": 4,
   "name": "哈哈"
  }, {
   "id": 3,
   "name": "哈哈"
  }];
  var obj = $("#mtable");

  function initSerise() {
   obj.append("<tr οnclick='sortS()'><th>id</th><th>名字</th></tr>")
   for(var i = 0; i < data.length; i++) {
    obj.append("<tr><td>" + data[i].id + "</td><td>" + data[i].name + "</td></tr>");
   }
  }
  initSerise();
  var o=1;

  function sortS() {
   if(o == 1) {
    o = 2;
    data.sort(compare("id"));
    obj.html('');
    obj.append("<tr οnclick='sortS()'><th>id</th><th>名字</th></tr>");
    for(var i = 0; i < data.length; i++) {

     obj.append("<tr><td>" + data[i].id + "</td><td>" + data[i].name + "</td></tr>");
    }
   } else {
    o = 1;
    data.sort(compare2("id"));
    obj.html('');
    obj.append("<tr οnclick='sortS(1)'><th>id</th><th>名字</th></tr>");
    for(var i = 0; i < data.length; i++) {

     obj.append("<tr><td>" + data[i].id + "</td><td>" + data[i].name + "</td></tr>");
    }
   }
  }
  var compare = function(prop) {
   return function(obj1, obj2) {
    var val1 = obj1[prop];
    var val2 = obj2[prop];
    if(val1 < val2) {
     return -1;
    } else if(val1 > val2) {
     return 1;
    } else {
     return 0;
    }
   }
  }
  var compare2 = function(prop) {
   return function(obj1, obj2) {
    var val1 = obj1[prop];
    var val2 = obj2[prop];
    if(val1 < val2) {
     return 1;
    } else if(val1 > val2) {
     return -1;
    } else {
     return 0;
    }
   }
  }
</script>

</html>