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 AnythingSlider滑动效果插件
Feb 07 Javascript
javascript 模式设计之工厂模式详细说明
May 10 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
Jquery实现遮罩层的方法
Jun 08 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
微信小程序实现选项卡功能
Jun 19 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 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模块memcached使用指南
2014/12/08 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
PHP添加图片水印、压缩、剪切的封装类
2015/08/17 PHP
开启PHP的伪静态模式
2015/12/31 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
理解Javascript_09_Function与Object
2010/10/16 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
python3编写C/S网络程序实例教程
2014/08/25 Python
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
django主动抛出403异常的方法详解
2019/01/04 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
房地产出纳岗位职责
2013/12/01 职场文书
银行领导证婚词
2014/01/11 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书