javascript 二维排序表格代码

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

收藏 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 二维排序表格代码

JavaScript this关键字指向常用情况解析

Vue-cli打包后如何本地查看的操作

vue cli 3.0通用打包配置代码,不分一二级目录

JavaScript事件循环及宏任务微任务原理解析

关于vue-cli3打包代码后白屏的解决方案

vue打包静态资源后显示空白及static文件路径报错的解决

vue-cli3访问public文件夹静态资源报错的解决方式

JS继承实现方法及优缺点详解

vue或react项目生产环境去掉console.log的操作

解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题

网络赚钱

站长故事