練習(xí)題---JS排序

          Posted on 2007-10-17 08:26 久城 閱讀(1498) 評(píng)論(1)  編輯  收藏 所屬分類: JavaTest
          有一個(gè)二維表格,表格中的每一列分別有一個(gè)列名,表格中的數(shù)據(jù)為數(shù)字類型,要求編寫一個(gè)程序,能夠按照用戶指定的列順序以及每個(gè)列的升降序進(jìn)行排序。
          (1)       語(yǔ)言不限
          (2)       表格中的列數(shù)目不限(1-n
          (3)       排序的列數(shù)目不限(0-n
          (4)       變量的命名和使用要符合學(xué)習(xí)的內(nèi)容
          例如:
          Id    Age   Score1 Score2 Score3
          1      20     45      56      67
          3      33     12      98      100
          …..
          7     77     33       12      91
          用戶可以指定按照Age(升序),Score2(降序)的順序?qū)?shù)據(jù)進(jìn)行排序。

          代碼如下:
          <!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">
                      
          // 二維數(shù)字?jǐn)?shù)組
                      var clmArr = new Array(); 
                      clmArr
          =[ [1,5,456,6,89], [2,51,515,32,15],[3,45,68,24,6] ];    
                      
          // 要根據(jù)排序的列
                      var orderByTheObject = 0;
                      
          // 排序方式
                      var orderByTheOrder = 1;

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

                      }
           

                      
          // 畫(huà)表格,輸出二維數(shù)組
                      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>

          這樣的代碼似乎有些格路。但還是讓我學(xué)到了些東西。

          用Comparator這個(gè)接口來(lái)做應(yīng)該更標(biāo)準(zhǔn)一些,有時(shí)間再試試吧。


          歡迎來(lái)訪!^.^!
          本BLOG僅用于個(gè)人學(xué)習(xí)交流!
          目的在于記錄個(gè)人成長(zhǎng).
          所有文字均屬于個(gè)人理解.
          如有錯(cuò)誤,望多多指教!不勝感激!

          Feedback

          # re: 練習(xí)題---JS排序  回復(fù)  更多評(píng)論   

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

          Copyright © 久城

          主站蜘蛛池模板: 汨罗市| 汉源县| 辽阳县| 新兴县| 包头市| 新密市| 陇南市| 留坝县| 大庆市| 武邑县| 房产| 巴青县| 电白县| 浠水县| 汪清县| 英吉沙县| 三河市| 南郑县| 莱西市| 屏东县| 广昌县| 淮北市| 聂荣县| 平谷区| 武平县| 格尔木市| 弋阳县| 岑溪市| 巴楚县| 商都县| 建瓯市| 绥宁县| 崇阳县| 沂源县| 铁岭县| 灵寿县| 甘肃省| 敦煌市| 同仁县| 西峡县| 多伦县|