一:表格排序效果,根据点击表格头部th进行排序,如图:
二:示例代码,如下:
<!DOCTYPE html> <html> <head> <style type="text/css"> #tb1 { border: 1px solid #ddd; } #tb1 thead th{ width: 60px; } #tb1 tbody td { border: 1px solid #ddd; width: 60px; text-align: center; box-sizing: border-box; } </style> <meta charset="utf-8"> <title></title> </head> <body> <table id="tb1"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>平均分</th> <th>总分</th> </tr> </thead> <tbody> <tr> <td>小红</td> <td>21</td> <td>24</td> <td>16</td> </tr> <tr> <td>小强</td> <td>23</td> <td>2</td> <td>19</td> </tr> <tr> <td>小明</td> <td>14</td> <td>50</td> <td>24</td> </tr> </tbody> </table> <script type="text/javascript"> //获取table表格,获取th,获取tbody下的tr var table = document.getElementById("tb1"); var table_th = document.getElementsByTagName("th"); var table_tbody = table.getElementsByTagName("tbody")[0]; var table_tr = table_tbody.getElementsByTagName("tr"); function itemClick(i) {//i表示点击单个th table_th[i].onclick = function() { var temp_arr = [];//存放每个th对应的内容,根据内容进行排序 var temp_tr_arr = [];//存放每个th对应内容的行 for(j = 0; j < table_tr.length; j++) { if(table_tr[j].getElementsByTagName("td")[i].innerHTML==' '){ temp_arr.push('0') }else{ temp_arr.push(table_tr[j].getElementsByTagName("td")[i].innerHTML); } temp_tr_arr.push(table_tr[j].cloneNode(true)); }; //清空tbody内容 table_tbody.innerHTML=''; var temp = parseInt(temp_arr[0]) || temp_arr[0]; //定义排序方式 if(typeof(temp) == 'number') { temp_arr.sort(function(a, b) { return a - b; }); } else { temp_arr.sort(); } //重新进行排序 for(k = 0; k < temp_arr.length; k++) { for(vv = 0; vv < temp_tr_arr.length; vv++) { if(temp_arr[k] == temp_tr_arr[vv].getElementsByTagName("td")[i].innerHTML) { table_tbody.appendChild(temp_tr_arr[vv]); } } } } } for(i = 0; i < table_th.length; i++) { itemClick(i); } </script> </body> </html>