页面列表点击排序demo1
<html>
<head>
<title></title>
<script>
//记录鼠标状态, 记录鼠标按下, 记录当前列
var curState, curDown, curCol;
var oldPlace, newPlace;
function getTable(item) {
var obj = null;
do {
if (item.tagName=="TABLE") {
obj = item;
break;
}
item = item.offsetParent;
}
while (item != null);
return obj;
}
function calculateOffset(item, offsetName) {
var totalOffset = 0;
do {
totalOffset += eval('item.offset' + offsetName);
item = item.offsetParent;
}
while (item != null);
return totalOffset;
}
function moveCol(objCol) {
window.status = window.document.body.scrollLeft;
if (!curDown) {
//curCol = objCol;
//鼠标没有按下
if (window.event.x + window.document.body.scrollLeft > calculateOffset(objCol, "Left") + objCol.offsetWidth-3) {
//移动到了相应的部位/改变鼠标
curState=true;
window.document.body.style.cursor = "move";
}
else {
curState = false;
window.document.body.style.cursor = "default";
}
curCol = objCol;
}
}
function upBody() {
//鼠标抬起/一切恢复原状态
if (curState) {
//---------------------------调整表格--------------------------
//调整条件:(层左侧+线左侧=线绝对左侧坐标)>目标的左侧坐标+20
newPlace = window.event.x + window.document.body.scrollLeft;
if (myDiv.offsetLeft + myLine.offsetLeft > calculateOffset(curCol, "Left") + 20) {
if (curCol.width > oldPlace - newPlace)
curCol.width -= oldPlace - newPlace;
var curTable = getTable(curCol);
if (curTable!=null)
curTable.width -= oldPlace - newPlace;
curCol.innerText = curCol.width;
}
//-------------------------------------------------------------
curState = false;
curDown = false;
myDiv.style.display = "none";
window.document.body.style.cursor = "default";
}
}
function downBody() {
//鼠标按下
if (curState) {
curDown = true;
var curTable = getTable(window.event.srcElement);
if (curTable!=null) {
//---------定位竖线----------
myDiv.style.display = ""; //层可见
myLine.style.height = curTable.offsetHeight;
myLine.style.width = 1;
myDiv.style.left = window.event.x + window.document.body.scrollLeft - myLine.offsetLeft;
myDiv.style.top = calculateOffset(curTable, "Top") - myLine.offsetTop;
//---------------------------
oldPlace = window.event.x + window.document.body.scrollLeft;
}
}
}
function moveBody() {
//鼠标移动
if (curDown) {
//鼠标按下状态
myDiv.style.left = window.event.x + window.document.body.scrollLeft - myLine.offsetLeft;
window.document.body.style.cursor = "move";
}
}
function selectBody() {
//鼠标选择文本[不支持动态调整？]
if (curDown) //鼠标按下于调整状态
window.event.returnValue = false;
}
function sort(objCol) {
var txt = objCol.innerHTML;
var sortAsc = false;
if (txt.charAt(txt.length - 1)=='↓')
sortAsc = true;
var objTable = getTable(objCol);
for (var i = 0; i < objTable.rows(0).cells.length; i++) {
txt = objTable.rows(0).cells(i).innerHTML;
if ((txt.charAt(txt.length - 1)=='↓') || (txt.charAt(txt.length - 1)=='↑'))
objTable.rows(0).cells(i).innerHTML = txt.substring(0, txt.length - 1);
}
objCol.innerHTML += (sortAsc?"↑":"↓")
sortTable(objCol, sortAsc);
}
function sortTable(objCol, sortAsc) {
if (objCol.tagName == "TD") {
var objTable = getTable(objCol);
var i,j,k;
var intCol = objCol.cellIndex;
var boltmp, tmp;
for (i = 1; i < objTable.rows.length; i++)
for (j = i + 1; j < objTable.rows.length; j++) {
boltmp = (objTable.rows(i).cells(intCol).innerText >= objTable.rows(j).cells(intCol).innerText);
if ((sortAsc && !boltmp) || (!sortAsc && boltmp))
for (k = 0; k < objTable.rows(0).cells.length; k++) {
tmp = objTable.rows(i).cells(k).innerHTML;
objTable.rows(i).cells(k).innerHTML = objTable.rows(j).cells(k).innerHTML;
objTable.rows(j).cells(k).innerHTML = tmp;
}
}
}
}
function setTableBorder(objTable) {
var i,j;
for (i = 0; i < objTable.rows.length; i++)
for (j = 0; j < objTable.rows(i).cells.length; j++) {
if (objTable.rows(i).cells(j).innerHTML == "")
objTable.rows(i).cells(j).innerHTML = " ";
objTable.rows(i).cells(j).className = (i==0?"title":(i == (objTable.rows.length-1)?"bottom":"") + (j==0?"left":"") + (j == (objTable.rows(i).cells.length-1)?"right":""));
}
}
</script>
</head>
<body onmousedown="downBody()" onmouseover="moveBody()" onmouseup="upBody()" onselectstart="selectBody()">
<div id="myDiv" style="display:none; height:201px; left:12px; position:absolute; top:50px; width:28px; z-index:1">
<hr id="myLine" width="1" size="200" noshade color="black">
</div>
<table id="myTable" cellpadding="0" cellspacing="0" width="300">
<tr>
<td width="100" onclick="sort(this)" onmousemove="moveCol(this)">01</td>
<td width="100" onclick="sort(this)" onmousemove="moveCol(this)">02</td>
<td width="100" onclick="sort(this)" onmousemove="moveCol(this)">03</td>
</tr>
<tr>
<td onmousemove="moveCol(this)">04</td>
<td onmousemove="moveCol(this)">09</td>
<td onmousemove="moveCol(this)">10</td>
</tr>
<tr>
<td>05</td>
<td>08</td>
<td>11</td>
</tr>
<tr>
<td>06</td>
<td>07</td>
<td>12</td>
</tr>
</table>
<br>
<br>
<table id="myTable1" cellpadding="0" cellspacing="0" width="300">
<tr>
<td width="100" onclick="sort(this)" onmousemove="moveCol(this)">01</td>
<td width="100" onclick="sort(this)" onmousemove="moveCol(this)">02</td>
<td width="100" onclick="sort(this)" onmousemove="moveCol(this)">03</td>
</tr>
<tr>
<td>04</td>
<td>05</td>
<td>06</td>
</tr>
<tr>
<td>07</td>
<td>08</td>
<td>09</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
</table>
<script>
setTableBorder(myTable);
setTableBorder(myTable1);
</script>
</body>
</html>
