根据表格中的某一列进行排序的javascript代码
更新时间:2013年11月29日 15:51:48 作者:
根据表格中的某一列进行排序的实现方法有很多,下面为大家介绍下如何使用js来简单实现下,需要的朋友不要错过
复制代码 代码如下:
<script type="text/javascript">
var b = true ;
function sortAge(){
var tabNode = document.getElementsByTagName("table")[0];
var trNodes = tabNode.rows; //获取表格中的行对象
var arr = new Array();
for(var x=1;x<trNodes.length;x++){ //临时容器存入的是表格中行对象的引用
arr[x-1] = trNodes[x];
}
sort(arr);
var tbdNode = tabNode.childNodes[0];
if(b){ //if....else...控制按年龄的升降进行排序
for(var x=0;x<arr.length;x++){
tbdNode.appendChild(arr[x]);
}
b = false;
}else{
for(var x=arr.length-1;x>=0;x--){
tbdNode.appendChild(arr[x]);
}
b = true ;
}
}
function sort(arr){ // 排序
for(var x=0;x<arr.length;x++){
for(var y=x+1;y<arr.length;y++){
if(parseInt(arr[x].cells[1].innerText)>parseInt(arr[y].cells[1].innerText)){ // 不进行parseInt转换是以字符串的ASCII比较
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
}
}
}
</script>
<style type="text/css">
table{ width:60%; border:solid 1px #0066FF;}
table td {border:solid 1px #0099ff;}
a{ text-decoration: none;}
</style>
</head>
<body>
<table>
<tr>
<td>姓名</td><td><a href="javascript:void(0)" onclick="sortAge()">年龄</a></td><td>地址</td>
</tr>
<tr>
<td>张三</td><td>23</td><td>北京</td>
</tr>
<tr>
<td>李四</td><td>25</td><td>上海</td>
</tr>
<tr>
<td>王五</td><td>15</td><td>广州</td>
</tr>
<tr>
<td>唐总</td><td>20</td><td>长沙</td>
</tr>
</table>
</body>
您可能感兴趣的文章:
- JS实现的表格操作类详解(添加,删除,排序,上移,下移)
- javascript实现对表格元素进行排序操作
- JavaScript对表格或元素按文本,数字或日期排序的方法
- JavaScript实现表格点击排序的方法
- javascript操作表格排序实例分析
- js表格排序实例分析(支持int,float,date,string四种数据类型)
- javascript实现表格排序 编辑 拖拽 缩放
- js实现表格字段排序
- javascript 表格内容排序 简单操作示例代码
- JavaScript实现表格排序方法
- javascript-表格排序(降序/反序)实现介绍(附图)
- javascript多种数据类型表格排序代码分析
- JS学习之表格的排序简单实例
相关文章
Bootstrap Multiselect 常用组件实现代码
bootstrap-multiselect插件是一款基于bootstrap的下拉框美化插件,我们一般用来请求后台返回具有label和text对象的json数组即可渲染。接下来通过本文给大家分享Bootstrap Multiselect 常用组件实现代码,感兴趣的朋友一起看看吧2017-07-07全面解析JavaScript中“&&”和“||”操作符(总结篇)
这篇文章主要介绍了全面解析JavaScript中“&&”和“||”操作符(总结篇)的相关资料,需要的朋友可以参考下2016-07-07
最新评论