javascript 表格内容排序 简单操作示例代码


Posted in Javascript onJanuary 03, 2014
<div id="html"></div> 
<script> 
var listInfos = new Array(); 
listInfos[0] = new Array(); 
listInfos[0][0] = {'name':'推荐页1','DayCount':666,'AvgTime':29872,'ErrCount':180663,'ErrorRate':'2873%','DaySystemErrorCount':0,'DaySystemrErrorRate':'0%'} 
listInfos[0][1] = {'name':'推荐页2','DayCount':593896,'AvgTime':24946,'ErrCount':222,'ErrorRate':'2%','DaySystemErrorCount':0,'DaySystemrErrorRate':'0%'} 
listInfos[0][2] = {'name':'推荐页3','DayCount':956,'AvgTime':27957,'ErrCount':111,'ErrorRate':'10%','DaySystemErrorCount':0,'DaySystemrErrorRate':'0%'} 
listInfos[1] = new Array(); 
listInfos[1][0] = {'name':'推荐页4','DayCount':666,'AvgTime':116,'ErrCount':180663,'ErrorRate':'2873%','DaySystemErrorCount':0,'DaySystemrErrorRate':'0%'} 
listInfos[1][1] = {'name':'推荐页5','DayCount':11,'AvgTime':222,'ErrCount':222,'ErrorRate':'2%','DaySystemErrorCount':0,'DaySystemrErrorRate':'0%'} 
listInfos[1][2] = {'name':'推荐页6','DayCount':956,'AvgTime':956,'ErrCount':111,'ErrorRate':'10%','DaySystemErrorCount':0,'DaySystemrErrorRate':'0%'} 
function dateDesc(listInfos,field){ 
for( var i=0; i < listInfos.length ; i++ ){ 
for( var j = i+1 ; j < listInfos.length ; j++ ){ 
if( isCommaPercent(listInfos[i][field]) < isCommaPercent(listInfos[j][field]) ){ 
var arrayTemp = new Array(); 
arrayTemp = listInfos[i]; 
listInfos[i] = listInfos[j]; 
listInfos[j] = arrayTemp; 
} } 
} 
return listInfos; 
} 
function dataAsc(listInfos,field){ 
for( var i=0; i < listInfos.length ; i++ ){ 
for( var j = i+1 ; j < listInfos.length ; j++ ){ 
if( isCommaPercent(listInfos[i][field]) > isCommaPercent(listInfos[j][field]) ){ 
var arrayTemp = new Array(); 
arrayTemp = listInfos[i]; 
listInfos[i] = listInfos[j]; 
listInfos[j] = arrayTemp; 
} 
} 
} 
return listInfos; 
} 
function isCommaPercent(value){ 
var valueFloat; 
value = value.toLocaleString(); 
valueFloat = ( value.indexOf(',') > 0 )? value.split(',').join(''):value; 
valueFloat = (valueFloat.indexOf('%') > 0)?parseFloat(valueFloat.substr(0,valueFloat.indexOf('%'))): parseFloat(valueFloat); 
return valueFloat; 
} 

function sortOperation(sortInfos,field,sort){ 
var listInfos = new Array(); 
if( sort == 'desc' ){ 
for(var i=0; i < sortInfos.length ; i++ ){ 
listInfos[i] = dateDesc(sortInfos[i],field); 
} 
}else if( sort == 'asc' ){ 
for(var i=0; i < sortInfos.length ; i++ ){ 
listInfos[i] = dataAsc(sortInfos[i],field); 
} 
}else{ 
alert('操作错误...'); 
return false; 
} 
var tableStrList =''; 
for( var i=0; i < listInfos.length ; i++ ){ 
var tableStr='<h1>程序</h1>'; 
tableStr+= '<table width="100%" cellspacing="0" cellpadding="0" border="1" class="programTabble"><tbody><tr class="indexTableTr">'; 
tableStr +='<td width="16%">程序名称</td><td width="14%">当天访问量(次)</td><td width="14%">平均响应时间(us)</td><td width="14%">错误数(次)</td>'; 
tableStr +='<td width="14%">错误率(%)</td> <td width="14%">系统错误数(次)</td> <td width="14%">系统错误率(%)</td> </tr> '; 
for( var j = 0 ; j < listInfos[i].length ; j++ ){ 
tableStr +='<tr>'; 
tableStr +='<td><a href="detail.php?type=programs&pid=1">'+listInfos[i][j]['name']+'</a></td>'; 
tableStr +='<td>'+listInfos[i][j]['DayCount']+'</td>'; 
tableStr +='<td>'+listInfos[i][j]['AvgTime']+'</td>'; 
tableStr +='<td>'+listInfos[i][j]['ErrCount']+'</td>'; 
tableStr +='<td>'+listInfos[i][j]['ErrorRate']+'</td>'; 
tableStr +='<td>'+listInfos[i][j]['DaySystemErrorCount']+'</td>'; 
tableStr +='<td>'+listInfos[i][j]['DaySystemrErrorRate']+'</td>'; 
tableStr +='</tr>'; 
} 
tableStr +='</tbody></table>'; 
tableStrList += tableStr 
} 
document.getElementById("html").innerHTML=tableStrList; 
} 
sortOperation(listInfos,'DayCount','asc') 
</script>
Javascript 相关文章推荐
jquery autocomplete自动完成插件的的使用方法
Aug 07 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 Javascript
js 代码优化点滴记录
Feb 19 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
Js注册协议倒计时的小例子
Jun 24 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 #Javascript
使用js判断控件是否获得焦点
Jan 03 #Javascript
js保留小数点后几位的写法
Jan 03 #Javascript
js判断字符是否是汉字的两种方法小结
Jan 03 #Javascript
jquery事件重复绑定的快速解决方法
Jan 03 #Javascript
浅析jquery某一元素重复绑定的问题
Jan 03 #Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 #Javascript
You might like
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
php网页病毒清除类
2014/12/08 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
2013/02/01 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
python的类方法和静态方法
2014/12/13 Python
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
python实现朴素贝叶斯分类器
2018/03/28 Python
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
基于Python的PIL库学习详解
2019/05/10 Python
python程序变成软件的实操方法
2019/06/24 Python
Python中模块(Module)和包(Package)的区别详解
2019/08/07 Python
详解Python time库的使用
2019/10/10 Python
python生成特定分布数的实例
2019/12/05 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
final, finally, finalize的区别
2012/03/01 面试题
委托书范本
2014/04/02 职场文书
社区反邪教工作方案
2014/06/16 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
三峡人家导游词
2015/01/31 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
大学生入党群众意见书
2015/06/02 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers