`

js对特定表格排序

    博客分类:
  • web
 
阅读更多
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实现表格排序

    这篇我们将深入探讨如何使用JavaScript实现表格排序,包括对数字、日期和汉字的排序。 首先,我们需要理解HTML表格的基本结构,通常由`&lt;table&gt;`、`&lt;tr&gt;`(行)、`&lt;th&gt;`(表头)和`&lt;td&gt;`(数据单元格)组成。为了...

    Blue Table,Js表格排序插件

    **Blue Table:JavaScript表格排序插件** 在网页开发中,数据展示经常需要用到表格,而对表格数据进行排序是用户交互中的常见需求。Blue Table是一款基于JavaScript的表格排序插件,它能够帮助开发者轻松实现表格...

    Javascript表格排序大全

    JavaScript表格排序大全是一个涵盖多种JS表格排序实现方法的资源集合,旨在帮助开发者快速实现动态、交互式的表格数据排序功能。在网页开发中,表格是一种常用的数据展示方式,而JavaScript能够为表格提供强大的交互...

    js学习案例实现一个完整的表格排序

    这个"js学习案例实现一个完整的表格排序"旨在帮助开发者理解和掌握如何使用纯JavaScript实现对HTML表格的数据进行动态排序。在这个项目中,我们将探讨以下关键知识点: 1. **HTML表格基础**:首先,了解HTML中的`...

    基于jquery的表格筛选,排序,分页js

    表格排序是按照某一列或多列的值对表格进行升序或降序排列。可以使用`.sort()`方法结合自定义比较函数实现。例如,按第一列数字值进行升序排序: ```javascript function sortTable(columnIndex, isAscending) { ...

    jquery的表格排序插件

    标题中的“jQuery的表格排序插件”指的是使用JavaScript库jQuery实现的一种功能,允许用户在HTML表格中对数据进行动态排序。这种插件通常通过监听表格的头部点击事件,实现列数据的升序或降序排列,提升用户体验。...

    html表格排序资源

    HTML表格排序资源主要涉及到网页中数据展示的组织与管理,特别是在大数据量时,提供便捷的交互方式对数据进行排序,以提升用户体验。这里提到的两个主要工具是tablesorter和jquery-tablesort,它们都是基于...

    表格排序插件

    表格排序插件是用于增强HTML表格功能的JavaScript库,它允许用户通过点击表头对表格数据进行升序或降序排序。这种插件通常兼容各种主流浏览器,确保了良好的用户体验。"Mottie-tablesorter-eb48e66"便是这样一款插件...

    很灵活的javascript 表格排序 功能强大 可自定义排序规则

    JavaScript表格排序是一个在网页开发中常见的需求,尤其是在处理大量数据时。这个功能强大的JavaScript库,被称为"sorttable",能够帮助开发者轻松实现表格数据的排序,同时提供了自定义排序规则的能力,大大增强了...

    实用的js表格排序功能

    总的来说,这个"实用的js表格排序功能"提供了一种简便的方式来管理和显示动态数据,使得用户能够轻松地按照特定标准查看和分析表格内容。它体现了JavaScript在Web开发中的灵活性和实用性,同时也强调了高效、简洁的...

    jquery表格排序

    "jquery表格排序"是jQuery的一个重要应用场景,主要用于实现数据表格中的数据自动排序功能,使得用户可以按照某一列或者多列的数据进行升序或降序排列。这在展示大量数据时特别有用,提高了用户体验和数据的可读性。...

    Table表格排序显示jQuery代码

    "Table表格排序显示jQuery代码"是一个实用的工具,它允许用户通过简单的点击表头来实现表格数据的多维度排序,包括分类排序、数字大小排序以及英文排序等。这个功能极大地提升了用户体验,使得大量数据的浏览和分析...

    表格排序实验成果

    本实验成果“表格排序”主要关注如何对电子表格中的数据进行有效的组织和排列,以便快速查找和理解信息。这里我们将深入探讨表格排序的相关知识点。 首先,表格排序的基本功能是按照指定的列或多个列的值对数据行...

    blueTable 基于jQuery的表格排序插件 v0.1

    《blueTable:基于jQuery的高效表格排序插件详解》 在网页开发中,表格数据的展示和管理是一项常见的任务,而实现表格的排序功能则能极大地提升用户体验。今天我们要介绍的是一款名为“blueTable”的jQuery插件,它...

    jquery 表格排序插件

    本文将详细探讨"jQuery表格排序插件"这一主题,结合提供的标签和压缩包文件名称,我们可以推测这是一个包含源码、示例、样式和图像资源的完整插件包。 首先,让我们来理解jQuery表格排序插件的核心功能。此类插件...

    JS 做的表格数据排序。。。。。。

    在提供的文件列表中,我们看到一个名为"sorttable.js"的文件,这很可能是一个专门用于表格排序的JavaScript库,而"一实用的Javascript类库 - 蓝色理想.htm"可能是这个库的示例或文档页面。 `sorttable.js`库可能...

    一个表格排序程序

    7. **JavaScript库(tablesort.js)**:`tablesort.js`很可能是实现表格排序功能的库文件,它可能封装了事件监听、排序算法和DOM操作等功能,提供简洁的API供开发者使用。 8. **使用方法**:通常,引入`tablesort....

    jquery 表格排序

    总结来说,这个jQuery表格排序的例子展示了如何使用纯JavaScript(而非依赖特定插件)实现一个基本的表格排序功能。通过点击表头,可以对表格数据进行升序或降序排列。同时,通过添加CSS样式和JavaScript逻辑,可以...

    使用jqueryUI实现表格排序功能

    而“使用jQuery UI实现表格排序功能”是网页交互设计中的常见需求,尤其对于数据展示丰富的网页,如报表、数据分析页面等。jQuery UI 的 tablesorter 插件可以方便地实现这一功能,让表格数据可以根据用户的需求进行...

Global site tag (gtag.js) - Google Analytics