javascript widget native table sorting table script (compatible with ie firefox opera chrome)

Home

Web Front-end

JS Tutorial

javascript widget native table sorting table script (compatible with ie firefox opera chrome)_javascript skills

May 16, 2016 pm 05:51 PM

table sort sheet

First create an html page as sort.html, and copy the following content into it

Copy code The code is as follows:

 
<!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>Untitled Document</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>Happy</td> 
</tr> 
<tr> 
<td>3</td> 
<td>Dinner</td> 
</tr> 
<tr> 
<td>5</td> 
<td>Open</td> 
</tr> 
&lt ;/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> 
&lt ;/thead> 
<tbody> 
<tr> 
<td>1</td> 
<td>Happy</td> 
</tr&gt ; 
<tr> 
<td>3</td> ><td>5</td> 
<td>Open</td> 
</tr> 
</tbody> 
</table> 
 </body> 
</html> 

 

New script page sort.js 

Copy code

The code is as follows:

 
/* 
Table sort function
Event: 2012 7 24 
DOM node
If the table needs to be sorted, add sort="true" in the table attribute 
and the id is The only and necessary one
This js file can be imported directly
Because the repository created has no comments
<table width="200" border="1" sort="true" id="mytab" > 
<thead style="cursor:pointer"> 
<tr> 
<td class="desc">ID<span>|</span><em&gt ;-</em></td> 
<td class="desc">name<span>|</span><em>-</em></td> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>1</td> 
<td>Happy </td> 
</tr> 
<tr> 
<td>3</td> /tr> 
<tr> 
<td>5</td> 
<td>Open</td> 
</tr> 
</tbody&gt ; 
</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; 

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article

Repo: How To Revive Teammates

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

1 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

3 weeks ago By DDD

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?

3 weeks ago By 王林

Hot tools Tags

Code&IT

Voice

Business

Marketing

AI Detector

Chatbot

Design&Art

Hot Article

Repo: How To Revive Teammates

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

1 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

3 weeks ago By DDD

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?

3 weeks ago By 王林

Hot Article Tags

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7303

Java Tutorial

1622

CakePHP Tutorial

1342

Laravel Tutorial

1259

PHP Tutorial

1207

Related knowledge

Steps to adjust the format of pictures inserted in PPT tables Mar 26, 2024 pm 04:16 PM

Steps to adjust the format of pictures inserted in PPT tables

How to sort photos by date taken in Windows 11/10 Feb 19, 2024 pm 08:45 PM

How to sort photos by date taken in Windows 11/10

How to sort emails by sender, subject, date, category, size in Outlook Feb 19, 2024 am 10:48 AM

How to sort emails by sender, subject, date, category, size in Outlook

How to make a table for sales forecast Mar 20, 2024 pm 03:06 PM

How to make a table for sales forecast

How to use JavaScript to implement drag-and-drop adjustment of table column width? Oct 21, 2023 am 08:14 AM

How to use JavaScript to implement drag-and-drop adjustment of table column width?

How to set WPS value to automatically change color according to conditions_Steps to set WPS table value to automatically change color according to condition Mar 27, 2024 pm 07:30 PM

How to set WPS value to automatically change color according to conditions_Steps to set WPS table value to automatically change color according to condition

How to export and import table data in Vue Oct 15, 2023 am 08:30 AM

How to export and import table data in Vue

How to insert automatic numbering or serial numbers into Word tables Mar 20, 2024 am 09:30 AM

How to insert automatic numbering or serial numbers into Word tables

See all articles