javascript小工具原生指令碼排序table表格相容ie firefox opera chrome 瀏覽器

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

首先建立html頁面為sort.html ，並把下面的內容複寫進去

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><style type="text/css">.desc span{ display:none;}.asc em{ display:none;}</style><script type="text/javascript" src="sort.js"></script></head><body><table width="200" border="1" cellpadding="0" cellspacing="0" sort="true" id="mytab"><thead style="cursor:pointer"> <tr> <td class="desc">ID<span>|</span><em>-</em></td> <td class="desc">name<span>|</span><em>-</em></td> </tr></thead><tbody> <tr> <td>1</td> <td>開心</td> </tr> <tr> <td>3</td> <td>開飯</td> </tr> <tr> <td>5</td> <td>開放</td> </tr> </tbody></table><table width="200" border="1" sort="true" id="mytabs"><thead style="cursor:pointer"> <tr> <td class="desc">ID<span>|</span><em>-</em></td> <td class="desc">name<span>|</span><em>-</em></td> </tr></thead><tbody> <tr> <td>1</td> <td>開心</td> </tr> <tr> <td>3</td> <td>開飯</td> </tr> <tr> <td>5</td> <td>開放</td> </tr> </tbody></table></body></html>

建立指令碼頁 sort.js

/*表格排序功能事件：2012 7 24DOM 節點如果表格需要排序在表格屬性中添加 sort="true" 並且 id是唯一併且是必須的此js檔案直接引入即可因為製作的倉儲沒有注釋<table width="200" border="1" sort="true" id="mytab"><thead style="cursor:pointer"> <tr> <td class="desc">ID<span>|</span><em>-</em></td> <td class="desc">name<span>|</span><em>-</em></td> </tr></thead><tbody> <tr> <td>1</td> <td>開心</td> </tr> <tr> <td>3</td> <td>開飯</td> </tr> <tr> <td>5</td> <td>開放</td> </tr> </tbody></table>*/var Core = (function(window){return {init: function(){Core.getTableById();Core.setHeadClick();},I: function(id){return document.getElementById(id);},N: function(name){return document.getElementsByTagName(name);},config: {arr:[]},getTableById: function(){var table_arr=Core.N("table");for(var i = 0; i < table_arr.length; i++){if(table_arr[i].getAttribute("sort")){Core.config.arr.push(table_arr[i].getAttribute("id"));}}//alert(Core.config.arr)},setHeadClick: function(){var arr = Core.config.arr;if(!arr.length) return false;for(var j = 0 ; j< arr.length;j++){var thead = Core.I(arr[j]).getElementsByTagName("thead")[0].getElementsByTagName("td");for(var i = 0; i<thead.length;i++){if(thead[i].attachEvent){thead[i].attachEvent("onclick",Core.sortList)}else{thead[i].addEventListener("click",Core.sortList,false)}//if(i==0){//thead[i].click();//}}}},sortList: function(e){var index=0,arr=[],sort="asc",table=null;if(e.srcElement){index=e.srcElement.cellIndex;sort=e.srcElement.getAttribute("sort");e.srcElement.className=sort == "asc" ? "desc" : "asc";e.srcElement.setAttribute("sort", sort == "asc" ? "desc" : "asc");table = Core.getTableId(e.srcElement)}else{index=e.currentTarget.cellIndex;sort=e.currentTarget.getAttribute("sort");e.currentTarget.className=sort == "asc" ? "desc" : "asc";e.currentTarget.setAttribute("sort", sort == "asc" ? "desc" : "asc");table = Core.getTableId(e.currentTarget)}Core.getList(table,index,arr);Core.updateList(table,sort,arr);},getTableId: function(p){for(var i=0,n=p;n=n.parentNode;i++){if(i>100) break;if(n.nodeName=="TABLE"){//alert(n.nodeName/*n.getAttribute("id")*/)return n;}}},getList: function (table,index,arr){var table = table.getElementsByTagName("tbody")[0];for(var i = 0; i< table.rows.length; i++){var item = table.rows[i];for(var j = 0; j< item.cells.length;j++){var jtem = item.cells[index];if(jtem.innerHTML){//alert(jtem.innerHTML)arr[i]=jtem.innerHTML;}break;}}},updateList: function (table,sort,arr){var table = table.getElementsByTagName("tbody")[0];for(var i = 0; i< arr.length;i++){for(var j = i+1;j< arr.length;j++){if(sort=="asc"){if(arr[i] > arr[j]){var rwos=table.rows[i].cloneNode(true);table.replaceChild(table.rows[j],table.rows[i]);if(j+1==arr.length){//table.insertBefore(rwos,null);table.appendChild(rwos)}else{table.insertBefore(rwos,table.rows[j]);}var tim= arr[i];arr.splice(i,1,arr[j]);arr.splice(j,1,tim);}}else{if(arr[i] < arr[j]){var rwos=table.rows[i].cloneNode(true);table.replaceChild(table.rows[j],table.rows[i]);if(j+1==arr.length){//table.insertBefore(rwos,null);table.appendChild(rwos)}else{table.insertBefore(rwos,table.rows[j]);}var tim= arr[i];arr.splice(i,1,arr[j]);arr.splice(j,1,tim);}}}}}};})(window);window.onload=Core.init;

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More