根据表格中的某一列进行排序的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实现点击输入框弹出窗体选择信息

    这篇文章主要是对利用javaScript实现点击输入框弹出窗体选择信息进的实例行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • 完美解决JS文件页面加载时的阻塞问题

    完美解决JS文件页面加载时的阻塞问题

    下面小编就为大家带来一篇完美解决JS文件页面加载时的阻塞问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-12-12
  • javascript中replace使用方法总结

    javascript中replace使用方法总结

    这篇文章主要为大家详细介绍了javascript中replace的使用方法,使用replace和正则表达式共同实现字符串trim方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 微信小程序聊天功能的示例代码

    微信小程序聊天功能的示例代码

    这篇文章主要介绍了微信小程序聊天功能的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • react build 后打包发布总结

    react build 后打包发布总结

    这篇文章主要介绍了react build 后打包发布总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • JS 对象(Object)和字符串(String)互转方法

    JS 对象(Object)和字符串(String)互转方法

    下面小编就为大家带来一篇JS 对象(Object)和字符串(String)互转方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • javascript函数定义的几种区别小结

    javascript函数定义的几种区别小结

    本篇文章主要是对javascript函数定义的几种区别进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • js HTML5上传示例代码完整版

    js HTML5上传示例代码完整版

    这篇文章主要为大家详细介绍了js HTML5上传示例代码完整版,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • JS表单传值和URL编码转换

    JS表单传值和URL编码转换

    本篇文章给大家详细分享了JS表单传值和URL编码转换的相关知识点,并把实例做了分享,一起学习下。
    2018-03-03
  • 小程序scroll-view组件实现滚动的示例代码

    小程序scroll-view组件实现滚动的示例代码

    这篇文章主要介绍了小程序scroll-view组件实现滚动的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09

最新评论