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 相关文章推荐
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 Javascript
基于javascript编写简单日历
May 02 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
EditPlus中的正则表达式 实战(2)
Dec 15 Javascript
node中Express 动态设置端口的方法
Aug 04 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
Vue 表情包输入组件的实现代码
Jan 21 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
通过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
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
php截取中文字符串函数实例
2015/02/23 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
javascript实现时钟动画
2020/12/03 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
Python中标准模块importlib详解
2017/04/16 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
python 堆和优先队列的使用详解
2019/03/05 Python
详解python的四种内置数据结构
2019/03/19 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
哈理工毕业生的求职信
2013/12/22 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
工伤事故证明
2014/10/20 职场文书
大学生在校表现评语
2014/12/31 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
2015年幼儿园中班下学期工作总结
2015/05/22 职场文书
理解深度学习之深度学习简介
2021/04/14 Python