当前位置：首页 > 资讯 > 技术文档

javascript 二维排序表格代码

时间：2020-02-16 06:11 编辑：来源：阅读：
扫一扫，手机访问

摘要：javascript 二维排序表格代码

功能如下： 1.排序功能：单击行表头或列表头则进行正序排序；若再次单击，则进行逆序； 2.修改功能：双击某个单元格，则可进行输入操作，当输入框失去焦点时，则新数据被保存； 3.随机功能：每次刷新页面，表格中的数据都不一样；效果图： [img]http://files.jb51.net/upload/201012/20101206195351519.gif[/img] 完整源码如下：

二维排序表格 
 
 
 
 
<div id="main"> 
 
二维排序表格
 
<table border="0" cellpadding="1" cellspacing="1" id="tb"> 
<thead> 
<tr> 
<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> 
</tr> 
</thead> 
<tbody> 
<tr> 
<th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
行1 
</th> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
</tr> 
<tr> 
<th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
行2 
</th> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
</tr> 
<tr> 
<th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
行3 
</th> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
</tr> 
<tr> 
<th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
行4 
</th> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
</tr> 
<tr> 
<th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
行5 
</th> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
<td ondblclick="inputValue(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
  
</td> 
</tr> 
</tbody> 
</table> 
<div style="margin-top: 50px; background-color: #eeedf0; width: 80%; font-size: 12px;"> 
说明：
 
1.排序功能：单击行表头或列表头则进行正序排序；若再次单击，则进行逆序；
 
2.修改功能：双击某个单元格，则可进行输入操作，当输入框失去焦点时，则新数据被保存；
 
3.随机功能：每次刷新页面，表格中的数据都不一样；
 
</div> 
</div>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

全部评论(0)

上一篇：浅析hasOwnProperty方法的应用
下一篇：从基础开始建立一个JS代码库第1/2页

资讯排行榜
更多>>