function initSortArrays() { var seqArray = []; var amountArray = []; var perArray = []; var timeArray = []; $('.css_issue_no').each(function(){ var seqId = $(this).parent().attr('seqId'); seqGlobalArray.push(seqId); }); $('.css_amont').each(function(){ var value = $(this).html(); var seqId = $(this).parent().attr('seqId'); amountArray.push(value + "_" + seqId); }); amountArray = amountArray.sort(function(a, b){ a = a.substring('_'); b = b.substring('_'); return parseInt(a, 10) - parseInt(b, 10); }); $('.css_percent').each(function(){ var value = $(this).children().html().replace('%', ''); var seqId = $(this).parent().attr('seqId'); perArray.push(value + "_" + seqId); }); perArray = perArray.sort(function(a, b){ a = a.substring('_'); b = b.substring('_'); return parseFloat(a, 10) - parseFloat(b, 10); }); $('.css_time').each(function(){ var value = $(this).html(); var seqId = $(this).parent().attr('seqId'); timeArray.push(value + "_" + seqId); }); timeArray = timeArray.sort(function(a, b){ a = a.substring('_'); b = b.substring('_'); return a > b; }); $.each(amountArray, function(n,value) { value = value.substring(value.indexOf("_") + 1); amountGlobalArray.push(value); }); $.each(perArray, function(n,value) { value = value.substring(value.indexOf("_") + 1); perGlobalArray.push(value); }); $.each(timeArray, function(n,value) { value = value.substring(value.indexOf("_") + 1); timeGlobalArray.push(value); }); } function sortBindClick() { $('#jq_seq_td').unbind('click'); $('#jq_seq_td').bind('click', function(){ var asc = $(this).attr('asc'); if (asc == '0') { $(this).attr('asc', '1'); $(this).children().html('↑'); sortTable(seqGlobalArray,'1'); } else { $(this).attr('asc', '0'); $(this).children().html('↓'); sortTable(seqGlobalArray,'0'); } }); $('#jq_amont_td').unbind('click'); $('#jq_amont_td').bind('click', function(){ var asc = $(this).attr('asc'); if (asc == '0') { $(this).attr('asc', '1'); $(this).children().html('↑'); sortTable(amountGlobalArray, '1'); } else { $(this).attr('asc', '0'); $(this).children().html('↓'); sortTable(amountGlobalArray, '0'); } }); $('#jq_per_td').unbind('click'); $('#jq_per_td').bind('click', function(){ var asc = $(this).attr('asc'); if (asc == '0') { $(this).attr('asc', '1'); $(this).children().html('↑'); sortTable(perGlobalArray, '1'); } else { $(this).attr('asc', '0'); $(this).children().html('↓'); sortTable(perGlobalArray, '0'); } }); $('#jq_time_td').unbind('click'); $('#jq_time_td').bind('click', function(){ var asc = $(this).attr('asc'); if (asc == '0') { $(this).attr('asc', '1'); $(this).children().html('↑'); sortTable(timeGlobalArray, '1'); } else { $(this).attr('asc', '0'); $(this).children().html('↓'); sortTable(timeGlobalArray, '0'); } }); } function sortTable(sortedArray, asc) { //升序 if (asc == '1') { for (var i=sortedArray.length - 1; i >= 0; i--) { var id = sortedArray[i]; var obj = $('#jq_section_div_'+id); var before = $('#jq_bf_tidian_tab tbody').children(':first'); if(before.attr('id') != obj.attr('id')){ obj.insertBefore(before); } } } else { for (var i=0; i <= sortedArray.length - 1; i++) { var id = sortedArray[i]; var obj = $('#jq_section_div_'+id); var before = $('#jq_bf_tidian_tab tbody').children(':first'); if(before.attr('id') != obj.attr('id')){ obj.insertBefore(before); } } } //重新设置分行颜色 setTrClass(); } function setTrClass() { $("#jq_bf_tidian_tab tbody tr:odd").addClass("g_bj"); $("#jq_bf_tidian_tab tbody tr:even").removeClass("g_bj"); }
相关推荐
这篇我们将深入探讨如何使用JavaScript实现表格排序,包括对数字、日期和汉字的排序。 首先,我们需要理解HTML表格的基本结构,通常由`<table>`、`<tr>`(行)、`<th>`(表头)和`<td>`(数据单元格)组成。为了...
**Blue Table:JavaScript表格排序插件** 在网页开发中,数据展示经常需要用到表格,而对表格数据进行排序是用户交互中的常见需求。Blue Table是一款基于JavaScript的表格排序插件,它能够帮助开发者轻松实现表格...
JavaScript表格排序大全是一个涵盖多种JS表格排序实现方法的资源集合,旨在帮助开发者快速实现动态、交互式的表格数据排序功能。在网页开发中,表格是一种常用的数据展示方式,而JavaScript能够为表格提供强大的交互...
这个"js学习案例实现一个完整的表格排序"旨在帮助开发者理解和掌握如何使用纯JavaScript实现对HTML表格的数据进行动态排序。在这个项目中,我们将探讨以下关键知识点: 1. **HTML表格基础**:首先,了解HTML中的`...
表格排序是按照某一列或多列的值对表格进行升序或降序排列。可以使用`.sort()`方法结合自定义比较函数实现。例如,按第一列数字值进行升序排序: ```javascript function sortTable(columnIndex, isAscending) { ...
标题中的“jQuery的表格排序插件”指的是使用JavaScript库jQuery实现的一种功能,允许用户在HTML表格中对数据进行动态排序。这种插件通常通过监听表格的头部点击事件,实现列数据的升序或降序排列,提升用户体验。...
HTML表格排序资源主要涉及到网页中数据展示的组织与管理,特别是在大数据量时,提供便捷的交互方式对数据进行排序,以提升用户体验。这里提到的两个主要工具是tablesorter和jquery-tablesort,它们都是基于...
表格排序插件是用于增强HTML表格功能的JavaScript库,它允许用户通过点击表头对表格数据进行升序或降序排序。这种插件通常兼容各种主流浏览器,确保了良好的用户体验。"Mottie-tablesorter-eb48e66"便是这样一款插件...
JavaScript表格排序是一个在网页开发中常见的需求,尤其是在处理大量数据时。这个功能强大的JavaScript库,被称为"sorttable",能够帮助开发者轻松实现表格数据的排序,同时提供了自定义排序规则的能力,大大增强了...
总的来说,这个"实用的js表格排序功能"提供了一种简便的方式来管理和显示动态数据,使得用户能够轻松地按照特定标准查看和分析表格内容。它体现了JavaScript在Web开发中的灵活性和实用性,同时也强调了高效、简洁的...
"jquery表格排序"是jQuery的一个重要应用场景,主要用于实现数据表格中的数据自动排序功能,使得用户可以按照某一列或者多列的数据进行升序或降序排列。这在展示大量数据时特别有用,提高了用户体验和数据的可读性。...
"Table表格排序显示jQuery代码"是一个实用的工具,它允许用户通过简单的点击表头来实现表格数据的多维度排序,包括分类排序、数字大小排序以及英文排序等。这个功能极大地提升了用户体验,使得大量数据的浏览和分析...
本实验成果“表格排序”主要关注如何对电子表格中的数据进行有效的组织和排列,以便快速查找和理解信息。这里我们将深入探讨表格排序的相关知识点。 首先,表格排序的基本功能是按照指定的列或多个列的值对数据行...
《blueTable:基于jQuery的高效表格排序插件详解》 在网页开发中,表格数据的展示和管理是一项常见的任务,而实现表格的排序功能则能极大地提升用户体验。今天我们要介绍的是一款名为“blueTable”的jQuery插件,它...
本文将详细探讨"jQuery表格排序插件"这一主题,结合提供的标签和压缩包文件名称,我们可以推测这是一个包含源码、示例、样式和图像资源的完整插件包。 首先,让我们来理解jQuery表格排序插件的核心功能。此类插件...
在提供的文件列表中,我们看到一个名为"sorttable.js"的文件,这很可能是一个专门用于表格排序的JavaScript库,而"一实用的Javascript类库 - 蓝色理想.htm"可能是这个库的示例或文档页面。 `sorttable.js`库可能...
7. **JavaScript库(tablesort.js)**:`tablesort.js`很可能是实现表格排序功能的库文件,它可能封装了事件监听、排序算法和DOM操作等功能,提供简洁的API供开发者使用。 8. **使用方法**:通常,引入`tablesort....
总结来说,这个jQuery表格排序的例子展示了如何使用纯JavaScript(而非依赖特定插件)实现一个基本的表格排序功能。通过点击表头,可以对表格数据进行升序或降序排列。同时,通过添加CSS样式和JavaScript逻辑,可以...
而“使用jQuery UI实现表格排序功能”是网页交互设计中的常见需求,尤其对于数据展示丰富的网页,如报表、数据分析页面等。jQuery UI 的 tablesorter 插件可以方便地实现这一功能,让表格数据可以根据用户的需求进行...