javascript 二维排序表格代码

更新时间：2010年12月06日 19:55:29 作者：

目前一直在学习WEB前端的知识。下面贴出最近完成的一个可排序表格.

功能如下：
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> <script type="text/javascript"> //------------以下是对二维数组的初始化与显示操作---------- // 记录二维数组 var twoArr = new Array(5); // 初始化二维数组 function initTwoArr() { for (var i = 0; i < twoArr.length; i++) { twoArr[i] = new Array(6); for (var j = 0; j < 6; j++) { twoArr[i][j] = getRandom(); } } showTwoArrOnTable(); } // 得到0-100内的随机数 function getRandom() { var result = Math.round(Math.random() * 100 - 1); return result; } // 把二维表显示在table中 function showTwoArrOnTable() { if (twoArr == null || twoArr.length < 1) { alert("数组初始化失败!"); return; } // 设置td的数值 var allTd = document.getElementById("tb").getElementsByTagName("td"); var tdIndex = 0; for (var i = 0; i < twoArr.length; i++) { // 为每个单元格设置id,格式 1-2 与数组的下标对应的 var idValue; for (var j = 0; j < twoArr[i].length; j++) { idValue = i.toString() + "-" + j.toString(); allTd[tdIndex].id = idValue; allTd[tdIndex].innerHTML = twoArr[i][j]; tdIndex++; } } } //------------以下是对table的操作---------- // 记录当前列(数字型)与当前的排序顺序(布尔型) var currentCol; var currentReverse; // 根据(col-列索引值)排序 function sortColumn(col) { // 判断是否要对数组倒序 var doReverse; // 如果再次单击当前列，则设置逆序的标志，并记录排序的方式(正序/逆序) if (col == currentCol) { doReverse = true; currentReverse = !currentReverse; } else { currentReverse = false; } // 记录当前排序的字段 currentCol = col; // 把table的所有行放入数组中 var tb = document.getElementById("tb"); var tbody = tb.rows[1].parentNode; var allTr = new Array(); for (var i = 1; i < tb.rows.length; i++) { allTr.push(tb.rows[i]); } if (doReverse) { allTr.reverse(); } else { allTr.sort(createComp(col)); } // 把排好序的行集合加入到table中 var frag = document.createDocumentFragment(); for (var i = 0; i < allTr.length; i++) { frag.appendChild(allTr[i]); } tbody.appendChild(frag); } // 根据(col-列索引值)返回一个排序规则 function createComp(col) { // 比较函数(正序) var compFunc = function(trA, trB) { // 取出要比较的值 var valA = trA.cells[col].firstChild.nodeValue.trim(); var valB = trB.cells[col].firstChild.nodeValue.trim() return comp(valA, valB); }; return compFunc; } // 对string对象进行扩展，去除字符串两端的空格 String.prototype.trim = function() { var reg = /^\s+|\s+$/g; return this.replace(reg, ""); } // 默认比较方式(升序) function comp(a, b) { a = parseInt(a); b = parseInt(b); return (a < b) ? -1 : ((a > b) ? 1 : 0); } var desc = false; // 默认为升序 // 根据传入的l列排序table function sortRow(rowTh) { // 找出rowIndex; var rowIndex; var tbody = document.getElementById("tb").childNodes[1]; var allTr = tbody.childNodes; for (var i = 0; i < allTr.length; i++) { if (rowTh == allTr[i].firstChild) { rowIndex = i; break; } } // 对数组进行排序，再填充到table arrRowSortFunc(rowIndex, desc); desc = !desc; showTwoArrOnTable(); } // 对twoArr进行分组冒泡排序 function arrRowSortFunc(rowIndex, isDesc) { var row = twoArr[rowIndex]; for (var i = 0; i < row.length; i++) { for (var j = 0; j < row.length - i - 1; j++) { if (isDesc) { // 如果是逆序 if (row[j] < row[j + 1]) { // 交换当前数组的同时要交换对应列的其他数据 var tmp = row[j]; row[j] = row[j + 1]; row[j + 1] = tmp; for (var m = 0; m < twoArr.length; m++) { if (m != rowIndex) { var tmp2 = twoArr[m][j]; twoArr[m][j] = twoArr[m][j + 1]; twoArr[m][j + 1] = tmp2; } } } } else { // 升序 if (row[j] > row[j + 1]) { // 交换当前数组的同时要交换对应列的其他数据 var tmp = row[j]; row[j] = row[j + 1]; row[j + 1] = tmp; for (var m = 0; m < twoArr.length; m++) { if (m != rowIndex) { var tmp2 = twoArr[m][j]; twoArr[m][j] = twoArr[m][j + 1]; twoArr[m][j + 1] = tmp2; } } } } } } } // 设置鼠标经过表头样式 function setActiveCol(activeCol) { activeCol.className = "activecol"; } function setLoseFocusCol(col) { col.className = ""; } // 当鼠标单击cell单元格时，把当前单元格设置为input输入框 function inputValue(cell) { var oldValue = cell.innerHTML.trim(); // 如果已经双击过了，则不做任何动作 var reg = /\<input/gi; if (reg.test(oldValue)) return; // 否则的话，则改为输入框 var input = "<input type='text' style='width=50px;' value='" + oldValue + "' onblur='saveChange(this," + oldValue + ")' " + " />"; cell.innerHTML = input; // 把光标移到input内 cell.firstChild.focus(); } // 保存改变的值 function saveChange(input, voldValue) { // 记录输入框的值 var newValue = input.value; if (newValue == "" || isNaN(newValue)) { // 如果输入的值不是数字或者为空，则还原为原始值 newValue = voldValue; } // 处理单元格id，则可以对应数组下标 var arrIndex = input.parentNode.id; var reg = /-/; var arrIndexAB = arrIndex.split(reg); var arrIndexA = arrIndexAB[0]; var arrIndexB = arrIndexAB[1]; // 更改对应数组的值 twoArr[arrIndexA][arrIndexB] = newValue; // 更改单元格的显示 input.parentNode.innerHTML = newValue; } function showMe() { alert("作者：叶志雄"); } </script> </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 中文转拼音实现代码有些bug
在做项目时候遇到一个小小的显示客户部门名称（拼音）的业务，就是在部门名称下有相应的拼音，而在现有的数据库中没有相应字段，并且部门数量比较多，添加起来比较费时，就想能否在js中实现，在页面中处理。
2010-03-03
微信小程序教程系列之页面跳转和参数传递（6）
这篇文章主要为大家详细介绍了微信小程序教程系列之页面跳转和参数传递，微信小程序提供了3种页面跳转方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
ES6中Array.find()和findIndex()函数的用法详解
ES6为Array增加了find()，findIndex函数。find()函数用来查找目标元素，找到就返回该元素，找不到返回undefined，而findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。下面通过实例详解，需要的朋友参考下吧
2017-09-09
JavaScript原生数组函数实例汇总
这篇文章主要介绍了JavaScript原生数组函数实例汇总,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-10-10
Javascript 完美运动框架(逐行分析代码，让你轻松了运动的原理)
这篇文章主要介绍了Javascript 完美运动框架,逐行分析代码，让你轻松了运动的原理,需要的朋友可以参考下
2015-01-01
浅谈JavaScript 中有关时间对象的方法
下面小编就为大家带来一篇浅谈JavaScript 中有关时间对象的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
javascript实现倒计时小案例
这篇文章主要为大家详细介绍了javascript实现倒计时小案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
JavaScript使用原型和原型链实现对象继承的方法详解
这篇文章主要介绍了JavaScript使用原型和原型链实现对象继承的方法,简单讲述了javascript原型与原型链的原理,并结合实例形式详细分析了javascript中对象继承的常见实现技巧,需要的朋友可以参考下
2017-04-04
p5.js绘制旋转的正方形
这篇文章主要为大家详细介绍了p5.js绘制旋转的正方形，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
JavaScript函数封装的示例详解
这篇文章主要通过动画的示例来为大家详细介绍一下JavaScript的函数封装，文中的示例代码讲解详细，感兴趣的小伙伴可以学习一下
2022-03-03