JS实现简单表格排序操作示例

来源：动视网责编：小采时间：2020-11-27 22:28:21

JS实现简单表格排序操作示例

JS实现简单表格排序操作示例:本文实例讲述了JS实现简单表格排序操作。分享给大家供大家参考，具体如下： <!DOCTYPE> <html> <head> <meta http-equiv=Content-type content=text/html charset=utf-8> <tit

推荐度：

点击下载本文 文档为doc格式

导读JS实现简单表格排序操作示例:本文实例讲述了JS实现简单表格排序操作。分享给大家供大家参考，具体如下： <!DOCTYPE> <html> <head> <meta http-equiv=Content-type content=text/html charset=utf-8> <tit

本文实例讲述了JS实现简单表格排序操作。分享给大家供大家参考，具体如下：

<!DOCTYPE>
<html>
<head>
 <meta http-equiv="Content-type" content="text/html" charset="utf-8">
 <title>sort table</title>
 <style>
 *{
 margin:0px;
 padding:0px;
 }
 body{
 background:#ccc;
 }
 table{
 width:350px;
 margin:0 auto;
 background-color:#eee;
 }
 table th{
 cursor:hand;
 padding:5px 0;
 background-color:#999;
 }
 table td{
 background-color:#fff;
 font-size:16px;
 font-weight:normal;
 text-align:center;
 line-height:30px;
 }
 </style>
 <script language="javascript">
 function sortCells(type){
 var tbs=document.getElementsByTagName("table")[0];
 var arr=[];
 var arr2=[];
 for(var i=1;i<tbs.rows.length;i++){
 var text=tbs.rows[i].cells[type].innerText;
 arr.push(text);
 arr2[text]=i;
 }
 if(type==0){
 arr.sort(function(a,b){return a-b});
 }else{
 arr.sort();
 }
 var temp="";
 for(var j=1;j<tbs.rows.length;j++){
 temp=tbs.rows[j].cells[0].innerText;
 tbs.rows[j].cells[0].innerText=tbs.rows[arr2[arr[j-1]]].cells[0].innerText;
 tbs.rows[arr2[arr[j-1]]].cells[0].innerText=temp;
 temp=tbs.rows[j].cells[1].innerText;
 tbs.rows[j].cells[1].innerText=tbs.rows[arr2[arr[j-1]]].cells[1].innerText;
 tbs.rows[arr2[arr[j-1]]].cells[1].innerText=temp;
 temp=tbs.rows[j].cells[2].innerText;
 tbs.rows[j].cells[2].innerText=tbs.rows[arr2[arr[j-1]]].cells[2].innerText;
 tbs.rows[arr2[arr[j-1]]].cells[2].innerText=temp;
// console.log(arr2);
 for(var i=1;i<tbs.rows.length;i++){
 var text=tbs.rows[i].cells[type].innerText;
 arr2[text]=i;
 }
 }
 }
 </script>
</head>
<body>
<center>sort table</center>
<table border="0">
 <tr>
 <th onclick="sortCells(0);">序号</th>
 <th onclick="sortCells(1);">姓名</th>
 <th onclick="sortCells(2);">日期</th>
 </tr>
 <tr>
 <td>2</td>
 <td>BB</td>
 <td>2015-09-12</td>
 </tr>
 <tr>
 <td>3</td>
 <td>CC</td>
 <td>2015-07-12</td>
 </tr>
 <tr>
 <td>1</td>
 <td>AA</td>
 <td>2015-09-11</td>
 </tr>
 <tr>
 <td>4</td>
 <td>DD</td>
 <td>2015-06-12</td>
 </tr>
</table>
</body>
</html>

运行效果：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript表格(table)操作技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

JS实现简单表格排序操作示例

推荐度：

点击下载本文 文档为doc格式

标签：表格简单 js

热门焦点

JS实现简单表格排序操作示例

JS实现简单表格排序操作示例

JS实现简单表格排序操作示例

最新推荐

猜你喜欢

热门推荐