練習題---JS排序

          Posted on 2007-10-17 08:26 久城 閱讀(1498) 評論(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 © 久城

          主站蜘蛛池模板: 贵溪市| 静海县| 阜南县| 华安县| 汨罗市| 金溪县| 景德镇市| 寿阳县| 炉霍县| 建始县| 柳州市| 钟山县| 井冈山市| 公主岭市| 准格尔旗| 城市| 文昌市| 出国| 鱼台县| 凌源市| 南丹县| 科技| 托里县| 莒南县| 若尔盖县| 郯城县| 龙州县| 宁明县| 罗平县| 三江| 七台河市| 洪湖市| 南丹县| 蓬莱市| 平和县| 秦皇岛市| 黄大仙区| 大同县| 南丹县| 乐清市| 密云县|