javascript 二维排序表格代码

所属分类：网络编程 / JavaScript 阅读数： 1670

收藏 0赞 0分享

功能如下：
1.排序功能：单击行表头或列表头则进行正序排序；若再次单击，则进行逆序；
2.修改功能：双击某个单元格，则可进行输入操作，当输入框失去焦点时，则新数据被保存；
3.随机功能：每次刷新页面，表格中的数据都不一样；
效果图：

完整源码如下：

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

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

更多精彩内容其他人还在看

javascript 二维排序表格代码

基于jquery封装的一个js分页

关于js datetime的那点事

js 关于=+与+=日期函数使用说明(赋值运算符)

JS 操作符整理[推荐收藏]

让html的text输入框只能输入数字和1个小数点(0-59之间可改)

Jquery 获取checkbox的checked问题

jQuery EasyUI API 中文文档 - DataGrid数据表格

jQuery EasyUI API 中文文档 - PropertyGrid属性表格

20款效果非常棒的 jQuery 插件小结分享

基于Jquery插件开发之图片放大镜效果(仿淘宝)

网络赚钱

站长故事