练习题---JS排序

Posted on 2007-10-17 08:26 久城 阅读(1230) 评论(1)  编辑  收藏 所属分类: JavaTest
有一个二维表格,表格中的每一列分别有一个列名,表格中的数据为数字类型,要求编写一个程序,能够按照用户指定的列顺序以及每个列的升降序进行排序。
(1)       语言不限
(2)       表格中的列数目不限(1-n
(3)       排序的列数目不限(0-n
(4)       变量的命名和使用要符合学习的内容
例如:
Id    Age   Score1 Score2 Score3
1      20     45      56      67
3      33     12      98      100
…..
7     77     33       12      91
用户可以指定按照Age(升序),Score2(降序)的顺序对数据进行排序。

代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    
<head>
        
<style type="text/css">
            body 
{ font-size:1em;}
            div,h1,h3 
{ text-align : center; } 
            td.head 
{ width:120px;background-color:#dddddd;font-weight:bold;}
            td.data 
{ width:120px;background-color:#eeeeee;}
        
</style>
        
<script type="text/javascript" language="Javascript">
            
// 二维数字数组
            var clmArr = new Array(); 
            clmArr
=[ [1,5,456,6,89], [2,51,515,32,15],[3,45,68,24,6] ];    
            
// 要根据排序的列
            var orderByTheObject = 0;
            
// 排序方式
            var orderByTheOrder = 1;

            
// 排序函数
            function arrSort(arrA,arrB)
                
if (orderByTheOrder == "asc"{
                    
return arrA[orderByTheObject]-arrB[orderByTheObject]; 
                }
 else if (orderByTheOrder == "desc")
                
{
                    
return arrB[orderByTheObject]-arrA[orderByTheObject]; 
                }

            }
 

            
// 画表格,输出二维数组
            function writeTable(){
                
var outString = "<table>";
                
for(var i=0; i<clmArr.length; i++)
                
{
                    outString 
+= "<tr><td class='data'>"+ clmArr[i].join("</td><td class='data'>"+"</td></tr>";
                }

                outString 
+= "</table>";
                document.getElementById(
"data").innerHTML = outString;
            }


            
// 改变排序方式
            function displayChange(){
                orderByTheObject 
= document.getElementById("clmName").value;
                orderByTheOrder 
= document.getElementById("order").value;
                clmArr.sort(arrSort); 
                writeTable();
            }
     
        
</script>
    
</head>
    
<body scroll="no" onload="writeTable()">
    
<h1>YW5_Test02</h1>
    
<hr>
    
<h3>Order By :</h3>
    
<div id="slct">
        
<select name="clmName" onchange="displayChange()">
            
<option value="0">Id</option>
            
<option value="1">Age</option>
            
<option value="2">Score1</option>
            
<option value="3">Score2</option>
            
<option value="4">Score3</option>
        
</select>&nbsp;&nbsp;&nbsp;&nbsp;
        
<select name="order" onchange="displayChange()">
            
<option value="asc">asc</option>
            
<option value="desc">desc</option>
        
</select>
    
</div>
    
<br>
    
<br>
    
<div id="head">
        
<table>
            
<tr>
                
<td class="head">Id</td>
                
<td class="head">Age</td>
                
<td class="head">Score1</td>
                
<td class="head">Score2</td>
                
<td class="head">Score3</td>
            
</tr>
        
</table>
    
</div>
    
<div id="data">
        
<span></span>
    
</div>
    
</body>
</html>

这样的代码似乎有些格路。但还是让我学到了些东西。

用Comparator这个接口来做应该更标准一些,有时间再试试吧。


欢迎来访!^.^!
本BLOG仅用于个人学习交流!
目的在于记录个人成长.
所有文字均属于个人理解.
如有错误,望多多指教!不胜感激!

Feedback

# re: 练习题---JS排序  回复  更多评论   

2014-12-09 12:03 by 让他
retention

只有注册用户登录后才能发表评论。


网站导航:
 

Copyright © 久城