根据表格中的某一列进行排序的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>

相关文章

  • javascript之更有效率的字符串替换

    javascript之更有效率的字符串替换

    今天研究了一下JS比较高级的正则表达式方法,发现一个我认为比原来的方法更有效率的字符串替换方法。
    2008-08-08
  • Next项目路径添加指定的访问前缀方法详解

    Next项目路径添加指定的访问前缀方法详解

    这篇文章主要介绍了Next项目路径添加指定的访问前缀方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 微信小程序列表中item左滑删除功能

    微信小程序列表中item左滑删除功能

    这篇文章主要介绍了微信小程序列表中item左滑删除功能,本文分步骤给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • file模式访问网页时iframe高度自适应解决方案

    file模式访问网页时iframe高度自适应解决方案

    最近做到iframe的高度自适应这个问题;发现自己做的网页是通过file方式访问的,将网页代码放到apache下通过http协议访问,在iframe加载的时候调用如下js方法:果然网页高度能够自适应(对于其他方案应该也有效果,我没有注意去尝试)感兴趣的朋友可以了解下
    2013-01-01
  • Bootstrap Multiselect 常用组件实现代码

    Bootstrap Multiselect 常用组件实现代码

    bootstrap-multiselect插件是一款基于bootstrap的下拉框美化插件,我们一般用来请求后台返回具有label和text对象的json数组即可渲染。接下来通过本文给大家分享Bootstrap Multiselect 常用组件实现代码,感兴趣的朋友一起看看吧
    2017-07-07
  • JS 判断某变量是否为某数组中的一个值的3种方法(总结)

    JS 判断某变量是否为某数组中的一个值的3种方法(总结)

    下面小编就为大家带来一篇JS 判断某变量是否为某数组中的一个值的3种方法(总结)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • vue/js实现页面自动往上滑动效果

    vue/js实现页面自动往上滑动效果

    这篇文章主要为大家详细介绍了vue/js实现页面自动往上滑动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • JS 实现图片直接下载示例代码

    JS 实现图片直接下载示例代码

    本文为大家详细介绍下使用JS实现图片直接下载,具体实现代码如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
    2013-07-07
  • JS实现网页导航条特效

    JS实现网页导航条特效

    这篇文章主要为大家详细介绍了JS实现网页导航条特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 全面解析JavaScript中“&&”和“||”操作符(总结篇)

    全面解析JavaScript中“&&”和“||”操作符(总结篇)

    这篇文章主要介绍了全面解析JavaScript中“&&”和“||”操作符(总结篇)的相关资料,需要的朋友可以参考下
    2016-07-07

最新评论