如下图,请实现表格信息的排序功能,当点击表头的属性区域,将表格信息进行排序切换功能,即第一次点击为降序排序,再一次点击进行升序排序。
我看很多人的回答都没考虑清楚: 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) }