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 相关文章推荐
Javascript attachEvent传递参数的办法
Dec 14 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
May 11 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
vue.js表格组件开发的实例详解
Oct 12 Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 Javascript
ReactNative列表ListView的用法
Aug 02 Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
Vue.directive使用注意(小结)
Aug 31 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 Javascript
vue下载二进制流图片操作
Oct 26 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基础之运算符的使用方法
2013/04/28 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
PHP 裁剪图片
2021/03/09 PHP
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
JS option location 页面跳转实现代码
2008/12/27 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
JavaScript中的原型prototype完全解析
2016/05/10 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
pygame学习笔记(5):游戏精灵
2015/04/15 Python
Python基于pillow判断图片完整性的方法
2016/09/18 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
Python二维码生成识别实例详解
2019/07/16 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
文明青少年标兵事迹材料
2014/01/28 职场文书
反邪教警示教育方案
2014/05/13 职场文书
团日活动总结模板
2014/06/25 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
Win11软件图标固定到任务栏
2022/04/19 数码科技