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 相关文章推荐
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 Javascript
浅谈vuex之mutation和action的基本使用
Aug 29 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
Electron-vue脚手架改造vue项目的方法
Oct 22 Javascript
vue-router实现编程式导航的代码实例
Jan 19 Javascript
javascript中floor使用方法总结
Feb 02 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 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
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
php微信开发之谷歌测距
2018/06/14 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
javaScript同意等待代码实现心得
2011/01/01 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
python批量修改文件后缀示例代码分享
2013/12/24 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
Python unittest模块用法实例分析
2018/05/25 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
pycharm配置git(图文教程)
2019/08/16 Python
通过实例了解python property属性
2019/11/01 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
天鹅的故事教学反思
2014/02/04 职场文书
公司建议书怎么写
2014/05/15 职场文书
消防工作实施方案
2014/06/09 职场文书
数学教育专业求职信
2014/07/22 职场文书
远程培训的心得体会
2014/09/01 职场文书
美容院员工规章制度
2015/08/05 职场文书
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL
Python闭包的定义和使用方法
2022/04/11 Python