javascript 二維排序表格代碼

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript 二維排序表格代碼

javascript 二維排序表格代碼

編輯：關於JavaScript

功能如下：
1.排序功能：單擊行表頭或列表頭則進行正序排序；若再次單擊，則進行逆序；
2.修改功能：雙擊某個單元格，則可進行輸入操作，當輸入框失去焦點時，則新數據被保存；
3.隨機功能：每次刷新頁面，表格中的數據都不一樣；
效果圖：

完整源碼如下：

<html> 
<head> 
<title>二維排序表格</title> 
<style type="text/css"> 
* 
{ 
font-family: Tahoma, Arial, Serif; 
font-size: 14; 
} 
body 
{ 
text-align: center; 
min-width: 760px; 
} 
#main 
{ 
width: 720px; 
margin: 0 auto; 
text-align: left; 
} 
p 
{ 
border-bottom: dotted 1px #e63; 
font-size: 24px; 
font-family: Arial; 
font-weight: bold; 
} 
/* 設置表格樣式 */table 
{ 
text-align: center; 
border: solid 1px #4682b4; 
width: 80%; 
background-color: #4682b4; 
} 
th 
{ 
background-color: #6495ed; 
cursor: pointer; 
color: White; 
height: 30px; 
} 
/* 配上單元格樣式以後，表格呈現出細線的邊框 */td 
{ 
background-color: #fff; 
padding: 4px; 
} 
/* 深藍色（鼠標經過） */.activecol 
{ 
background-color: #005eae; 
} 
</style> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"></head> 
<body onload="initTwoArr()"> 
 
<p> 
二維排序表格</p> 
 
<thead> 
 
<th> 
  
</th> 
<th onclick="sortColumn(1)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
列1 
</th> 
<th onclick="sortColumn(2)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
列2 
</th> 
<th onclick="sortColumn(3)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
列3 
</th> 
<th onclick="sortColumn(4)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
列4 
</th> 
<th onclick="sortColumn(5)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
列5 
</th> 
<th onclick="sortColumn(6)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
列6 
</th> 
 
</thead> 
 
 
<th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
行1 
</th> 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
 
<th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
行2 
</th> 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
 
<th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
行3 
</th> 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
 
<th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
行4 
</th> 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
 
<th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
行5 
</th> 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
 
 
 
說明：<br> 
1.排序功能：單擊行表頭或列表頭則進行正序排序；若再次單擊，則進行逆序；<br> 
2.修改功能：雙擊某個單元格，則可進行輸入操作，當輸入框失去焦點時，則新數據被保存；<br> 
3.隨機功能：每次刷新頁面，表格中的數據都不一樣；<br> 
 
 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一頁:javascript處理table表格的代碼
下一頁:兼容IE和FF的js腳本代碼小結（比較常用）

關於JavaScript

了解一點js的Eval函數: 復制代碼代碼如下: <title>無標題文檔</title> <sc
JavaScript跨域方法匯總: 做Web開發經常需要面對跨域問題，跨域問題的根源是浏覽器安全中的同源策略，比如說，對於http://
js 判斷一組日期是否是連續的簡單實例: 這是群裡一朋友問的問題，當時我說判斷下 day 是否相鄰即可，後來細想，發現完全不對。問題需求給定5

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

DIV CSS 佈局教程網

相關文章