js 표 조작 실현 - 정렬

9618 단어 js
js 로 표 조작 을 실현 하고 th 를 클릭 하면 이 th 가 속 한 데이터 에 따라 정렬 하고 한 번 의 내림차 순 을 클릭 하 며 두 번 째 는 오름차 순 을 클릭 합 니 다.
표 코드:
<table>
<thead>
    <tr>
        <th>  th>
        <th>  th>
        <th>  th>
        <th>  th>
    tr>
thead>
<tbody>
    <tr>
        <td>   td>
        <td>17td>
        <td>24td>
        <td>13td>
    tr>
    <tr>
        <td>    td>
        <td>19td>
        <td>15td>
        <td>20td>
    tr>
    <tr>
        <td>    td>
        <td>15td>
        <td>22td>
        <td>16td>
    tr>
    <tr>
        <td>    td>
        <td>23td>
        <td>15td>
        <td>14td>
    tr>
tbody>
table>

js 코드:
window.onload=function(){
        var tbody=document.getElementsByTagName('tbody');
        var th=document.getElementsByTagName('th');
        var r=tbody[0].rows.length;
        var c=tbody[0].rows[0].cells.length;
        var arr2=[];
        for(var i=0;i0].rows[i];

        }
        for(var i=0;ifunction(n){
                    var count=0;//      
                    th[i].onclick=function(){

                    if(count==0){
                        if(n==0){
                        strSortUp(arr2,n);

                        }
                        sortUp(arr2,n);
                        count=1;
                    }else{
                        if(n==0){
                        strSortDown(arr2,n);
                        }
                        sortDown(arr2,n);
                        count=0;
                        }
                        var str="";
                        var html="";
                        for(var k=0;kfor(var j=0;j""+arr2[k].children[j].innerText+"";
                            }
                            html+=""+str+"";
                            str="";

                        }
                        tbody[0].innerHTML=html;
                    }


                })(i);

                }
    }
    //    
    function sortUp(arr,n){
        arr.sort(function(a,b){
                                return a.children[n].innerText-b.children[n].innerText;
        });
    }
    //    
    function sortDown(arr,n){
        arr.sort(function(a,b){
                                return b.children[n].innerText-a.children[n].innerText;
        });
    }
    //     
    function strSortUp(arr,n){
        var i=0;
        arr.sort(function(a,b){
            return  a.children[n].innerText.localeCompare(b.children[n].innerText);
        });

    }
//      
    function strSortDown(arr,n){
        arr.sort(function(a,b){
                        return  -(a.children[n].innerText.localeCompare(b.children[n].innerText));
                                });
    }

좋은 웹페이지 즐겨찾기