WEB开发网
开发学院网页设计JavaScript JavaScript表格排序()转 阅读

JavaScript表格排序()转

 2009-09-14 20:13:01 来源:WEB开发网   
核心提示:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmln

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
   <title>javaScript表格排序</title>  
</head>
<body>
   <table style="width: 151px" id="t1">
     <tr>
       <td style="cursor:pointer">
         标题1</td>
        <td>
         标题2</td>
       <td>
         标题3</td>
     </tr>
     <tr>
       <td>
         a</td>
       <td>
         3</td>
       <td>
         d</td>
     </tr>
     <tr>
       <td>
         b</td>
       <td>
         2</td>
       <td>
         c</td>
     </tr>
     <tr>
       <td>
         c</td>
       <td>
         1</td>
       <td>
         a</td>
     </tr>
  </table>
   <script>
   enableTableSort("t1");
   function enableTableSort(id)
   {
    var mytable=document.getElementById(id);
    
    for(var i=0;i<mytable.rows[0].cells.length;i++)
    {
    mytable.rows[0].cells[i].onclick=sortTable(id,i);
    mytable.rows[0].cells[i].style.cursor="pointer";
    mytable.rows[0].cells[i].style.background="#f0f000";
    }
   
   
  
   function sortrow(cellIndex,sortDirection)
       {
         return function(row1,row2)
         {
           var value1= row1.cells[cellIndex].firstChild.nodeValue
           var value2= row2.cells[cellIndex].firstChild.nodeValue
           if(value1>value2)
           { 
           return sortDirection
           }
           else if(value1<value2)
           {
           return sortDirection;
           }      
           else return 0;
         }
       }
   
     function sortTable(id,cellIndex)
     {
       return function()
       {
         var mytable=document.getElementById(id);
         var tbody=mytable.tBodies[0];
         var trows=tbody.rows;
         var sortDirection=mytable.getAttribute("sortDirection")?mytable.getAttribute("sortDirection"):1;
         var arows=[];
       
        
        
         for(var i=1;i<trows.length;i++)
         arows.push(trows[i]);
      
         mytable.setAttribute("sortDirection",sortDirection?-1:1)

      
         arows.sort(sortrow(cellIndex,sortDirection));

      
         var docFragment=document.createDocumentFragment();
        
         for(var i=0;i<arows.length;i++)
         {
         docFragment.appendChild(arows[i]);
         }
        
         tbody.appendChild(docFragment);
        
        
       
       }
     }
   
   

  
   }

   </script>
</body>
</html>
 

Tags:JavaScript 表格 排序

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接