jQuery实现带分组数据的Table表头排序实例分析

编程学习 2021-07-04 21:03www.dzhlxh.cn编程入门
这篇文章主要介绍了jQuery实现带分组数据的Table表头排序方法,结合实例形式较为详细的分析了jQuery针对表头的操作及元素遍历排序相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jQuery实现带分组数据的Table表头排序。分享给大家供大家参考,具体如下:

如下图:

要求:点击表头排序时,"分组"及"分组明细"的数据层次关系不变

从网上找了一段常规的table排序,改了改,以满足“分组支持”,贴在这里备份

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <style type="text/css">
  .tbl-list, .tbl-list td, .tbl-list th {
   border: solid 1px #000;
   border-collapse: collapse;
   padding: 10px;
   margin: 15px;
  }
 </style>
 <script type="text/javascript" src="jquery.min.js"></script>
 <title>table sort</title>
 <script type="text/javascript">
  //排序 tableId: 表的id,iCol:第几列 ;dataType:iCol对应的列显示数据的数据类型
  function sortAble(th, tableId, iCol, dataType) {
   var ascChar = "▲";
   var descChar = "▼";
   var table = document.getElementById(tableId);
   //排序标题加背景色
   for (var t = 0; t < table.tHead.rows[0].cells.length; t++) {
    var th = $(table.tHead.rows[0].cells[t]);
    var thText = th.html().replace(ascChar, "").replace(descChar, "");
    if (t == iCol) {
     th.css("background-color", "#ccc");
    }
    else {
     th.css("background-color", "#fff");
     th.html(thText);
    }
   }
   var tbody = table.tBodies[0];
   var colRows = tbody.rows;
   var aTrs = new Array;
   //将得到的行放入数组,备用
   for (var i = 0; i < colRows.length; i++) {
    //注:如果要求“分组明细不参与排序”,把狼蚁网站SEO优化的注释去掉即可
    //if ($(colRows[i]).attr("group") != undefined) {
     aTrs.push(colRows[i]);
    / 

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板