JavaScript表格排序
最近写了一个JavaScript表格排序程序，个人感觉实现思路不太好，算法设计的有些臃肿，欢迎大伙给我提下意见，现将代码附下：
var arrNum = new Array(new Array(), new Array(), new Array(), new Array(), new Array());
var old_tdNum;
var gbAscending = true;
var gbCol = 0;
//初始化二维数组
function initArr(arr, cellsLength) {
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < cellsLength; j++) {
arr[i][j] = Math.floor(Math.random() * 100);
}
}
return arr;
}
//初始化表格
function initTable() {
var oTable = document.getElementById('mainTable');
arrNum = initArr(arrNum, 5);
for (var i = 0; i < oTable.rows.length; i++) {
for (var j = 0; j < oTable.rows[i].cells.length; j++) {
oTable.rows[i].cells[j].innerHTML = arrNum[i][j];
oTable.rows[i].cells[j].onclick = function() {
SetCellsEdit(this, this.innerHTML);
}
}
}
}
//设置单元格为可编辑框
function SetCellsEdit(element, value) {
var reg = /^\d*$/;
if (reg.test(value)) {
var textBox = document.createElement("INPUT");
textBox.type = "text";
textBox.className = "EditCell_TextBox";
//设置文本框当前值
textBox.value = value;
old_tdNum = value;
//设置文本框的失去焦点事件
textBox.onblur = function() {
CancelEditCell(this.parentNode, this.value);
}
//向当前单元格添加文本框
element.innerHTML = "";
element.appendChild(textBox);
textBox.focus();
textBox.select();
}
}
function SetRowCanEdit(row) {
var reg = /^\d*$/;
for (var j = 0; j < row.cells.length; j++) {
row.cells[j].onclick = function() {
SetCellsEdit(this, this.value);
}
}
}
//编辑结束时候调用，也就是你编辑的那个文本框失去焦点之后调用次方法
function CancelEditCell(element, value) {
var reg = /^\d*$/;
if (reg.test(value)) {
element.innerHTML = value;
} else {
element.innerHTML = old_tdNum;
}
}
function sortTableforCols(whichTable, whichCol, sortDir) {
var oTable = document.getElementById(whichTable);
var oTBody = oTable.getElementsByTagName("TBODY")[0];
var aTRows = oTBody.getElementsByTagName("TR");
var numRows = aTRows.length;
gbAscending = sortDir;
gbCol = whichCol;
var theSortedRows = new Array(numRows); //定义一个数组去保存tr标签
var i;
for (i = 0; i < numRows; i++) {
theSortedRows[i] = aTRows[i].cloneNode(true); //复制所有tr标签到数组中.包含tr所有的td节点
}
theSortedRows.sort(sortCallBack);
oTable.removeChild(oTBody);
oTBody = document.createElement("TBODY");
oTable.appendChild(oTBody);
for (i = 0; i < numRows; i++) {
oTBody.appendChild(theSortedRows[i]);
}
for (var i = 0; i < oTable.rows.length; i++) {
for (var j = 0; j < oTable.rows[i].cells.length; j++) {
arrNum[i][j] = oTable.rows[i].cells[j].innerHTML;
oTable.rows[i].cells[j].onclick = function() {
SetCellsEdit(this, this.innerHTML);
}
}
}
}
//比较相邻两行数据并排序
function sortCallBack(a, b) {
//传入的参数a,b都是tr节点
//包含一个或多个td节点
//得到指定要排序的列所对应的tr节点的所有子节点
var col1 = a.getElementsByTagName("TD")[gbCol];
var col2 = b.getElementsByTagName("TD")[gbCol];
//得到每列的文本节点
var text1 = parseInt(col1.firstChild.data);
var text2 = parseInt(col2.firstChild.data);
//排序
if (text1 < text2)
return gbAscending ? -1 : 1;
else if (text1 > text2)
return gbAscending ? 1 : -1;
else return 0;
}
//通过行排序，思路，将二维数组进行行列互换，在进行排序，然后再换回来
function sortTableforRows(whichTable,rowsNum, sortdir) {
var oTable = document.getElementById(whichTable);
var newarr = new Array(new Array(), new Array(), new Array(), new Array(), new Array());
//取出表格中内容存入数组中，并互换行列存在另外一个数组中
for (var i = 0; i < oTable.rows.length; i++) {
for (var j = 0; j < oTable.rows[i].cells.length; j++) {
arrNum[i][j] = oTable.rows[i].cells[j].innerHTML;
newarr[j][i] = parseInt(arrNum[i][j]);
}
}
//将得到的新数组按列进行排序
for (var k = 0; k < newarr.length - 1; k++) {
for (var n = k + 1; n < newarr.length; n++) {
if (!sortdir) {
if (newarr[k][rowsNum] < newarr[n][rowsNum]) {
var temp = newarr[k];
newarr[k] = newarr[n];
newarr[n] = temp;
}
} else {
if (newarr[k][rowsNum] > newarr[n][rowsNum]) {
var temp = newarr[k];
newarr[k] = newarr[n];
newarr[n] = temp;
}
}
}
}
//将得到的排序结果行列互换后输入到页面中
for (var i = 0; i < arrNum.length; i++) {
for (var j = 0; j < arrNum[i].length; j++) {
arrNum[i][j] = newarr[j][i];
oTable.rows[i].cells[j].innerHTML = arrNum[i][j];
}
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>js综合表格操作</title>
<style type="text/css">
body, font, td, div, ul, li
{
font-size: 10pt;
line-height: 155%;
width:1000px;
}
ul
{
list-style: none;
}
table
{
margin-top: 5%;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 0px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #CCCCCC;
border-right-color: #CCCCCC;
border-bottom-color: #CCCCCC;
border-left-color: #CCCCCC;
}
#mainTable
{
margin-top: 0px;
}
td
{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
}
input
{
text-align: left;
}
.EditCell_TextBox
{
width: 90%;
border: 1px solid #0099CC;
}
*
{
padding: 0px;
margin: 0px;
}
li
{
width:80px;
text-align:left;
float:left;
}
</style>
<script src="tableSort.js" type="text/javascript"></script>
</head>
<body onload="initTable()">
<div style="margin-left:20%;">
<div style="margin:0px auto">
<table id="menu" width="500" border="0" cellpadding="0" cellspacing="0" style="text-align: left">
<thead>
<tr>
<th width="20%">
(<a href='#' onclick="javascript:sortTableforCols('mainTable',0,true);return false;">Asc</a>)
(<a href='#' onclick="javascript:sortTableforCols('mainTable',0,false);return false;">Desc</a>)
</th>
<th width="20%">
(<a href='#' onclick="javascript:sortTableforCols('mainTable',1,true);return false;">Asc</a>)
(<a href='#' onclick="javascript:sortTableforCols('mainTable',1,false);return false;">Desc</a>)
</th>
<th width="20%">
(<a href='#' onclick="javascript:sortTableforCols('mainTable',2,true);return false;">Asc</a>)
(<a href='#' onclick="javascript:sortTableforCols('mainTable',2,false);return false;">Desc</a>)
</th>
<th width="20%">
(<a href='#' onclick="javascript:sortTableforCols('mainTable',3,true);return false;">Asc</a>)
(<a href='#' onclick="javascript:sortTableforCols('mainTable',3,false);return false;">Desc</a>)
</th>
<th width="20%">
(<a href='#' onclick="javascript:sortTableforCols('mainTable',4,true);return false;">Asc</a>)
(<a href='#' onclick="javascript:sortTableforCols('mainTable',4,false);return false;">Desc</a>)
</th>
</tr>
</thead>
</table>
</div>
<div style="height: 100%;margin:0px auto;text-align:center">
<div style="float: left;width:500px;">
<table id="mainTable" width="500" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div id="sort_menu" style="float: left;width:100px;text-align:left">
<ul style="width:100px;font-weight:bold">
<li>(<a href='#' onclick="javascript:sortTableforRows('mainTable',0,true);return false;">Asc</a>)
(<a href='#' onclick="javascript:sortTableforRows('mainTable',0,false);return false;">Desc</a>)
</li>
<li>(<a href='#' onclick="javascript:sortTableforRows('mainTable',1,true);return false;">Asc</a>)
(<a href='#' onclick="javascript:sortTableforRows('mainTable',1,false);return false;">Desc</a>)
</li>
<li>(<a href='#' onclick="javascript:sortTableforRows('mainTable',2,true);return false;">Asc</a>)
(<a href='#' onclick="javascript:sortTableforRows('mainTable',2,false);return false;">Desc</a>)
</li>
<li>(<a href='#' onclick="javascript:sortTableforRows('mainTable',3,true);return false;">Asc</a>)
(<a href='#' onclick="javascript:sortTableforRows('mainTable',3,false);return false;">Desc</a>)
</li>
<li>(<a href='#' onclick="javascript:sortTableforRows('mainTable',4,true);return false;">Asc</a>)
(<a href='#' onclick="javascript:sortTableforRows('mainTable',4,false);return false;">Desc</a>)
</li>
</ul>
</div>
</div>
</div>
</body>
</html>