经典指数          
原因
2232
浏览数
0
收藏数
 

如下图,请实现表格信息的排序功能,当点击表头的属性区域,将表格信息进行排序切换功能,即第一次点击为降序排序,再一次点击进行升序排序。

     举报   纠错  
 
切换
1 个答案

我看很多人的回答都没考虑清楚: 1、点击表头,也可以是点击“姓名”,需要区分中文和数字的排序方式;

2、“第一次点击为降序排序,再一次点击进行升序排序”,需要可逆,并且如果点击“力量”一次,再点击“敏捷”,然后再次点击“力量”,需要实现的是力量的降序,而不是力量的升序; 3、可扩展性,如果属性不止这4个,那么很多人的代码直接作废。

贴代码,原生JS写的: var

the_table=document.getElementById("the_table"); var

the_table_tr=the_table.getElementsByTagName("tr"); var

the_table_tbody=the_table.getElementsByTagName("tbody")[0];

var

the_table_head_td=the_table_tr[0].getElementsByTagName("td");

var click_switch=[];

for(i=0;i

each_one(_i){         click_switch.push(0);       

 the_table_head_td[_i].onclick=function(){           

 for(q=0;q

 if(q!==_i){                     click_switch[q]=0;           

     }             }             var temp_arr=[];       

     var the_table_tr_arr=[];           

 for(j=1;j

 temp_arr.push(the_table_tr[j].getElementsByTagName("td")[_i].innerHTML);

              

 the_table_tr_arr.push(the_table_tr[j].cloneNode(true));       

     };             var tr_length_temp=the_table_tr.length   

         for(x=1;x

 the_table_tbody.removeChild(the_table_tbody.getElementsByTagName("tr")[1]);

            }             if(temp_arr[0]*1){               

 temp_arr.sort(function compare(a,b){return a-b;});           

 }else{                 temp_arr.sort(function(a,b){return

a

 if(click_switch[_i]==1){                 click_switch[_i]=0;

                for(k=temp_arr.length-1;k>=0;k--){           

         (function each_two(_k){                       

 for(vv=0;vv

       

 if(temp_arr[_k]==the_table_tr_arr[vv].getElementsByTagName("td")[_i].innerHTML){

                                                           

 the_table_tbody.appendChild(the_table_tr_arr[vv]);               

             }                         }                   

 })(k);                 }             }else{           

     click_switch[_i]=1;               

 for(k=0;k

each_two(_k){                       

 for(vv=0;vv

       

 if(temp_arr[_k]==the_table_tr_arr[vv].getElementsByTagName("td")[_i].innerHTML){

                                                           

 the_table_tbody.appendChild(the_table_tr_arr[vv]);               

             }                         }                   

 })(k);                 }             }         }   

 })(i) }

 
切换
撰写答案