效果图：拖动带颜色位置上的竖杠，可以左右拖动表格宽度，表头宽度和表格宽度一起改变
特点1：拖动后的文字不会被表格线覆盖掉
特点2：可以对表格中内容进行升降排序
再帖代码：
<html>
<head>
<title></title>
<style>
td {border-bottom:1px solid Black; border-left:1px solid Black}
.title {border-left:1px solid #FFFFFF; border-top:1px solid #FFFFFF; border-right:1px solid #666666; border-bottom:1px solid #666666; background:#999999; color:#FFFFFF;}
.left {border-left:2px solid Black}
.right {border-right:2px solid Black}
.bottom {border-bottom:2px solid Black}
.bottomleft {border-bottom:2px solid Black; border-left:2px solid Black}
.bottomright {border-bottom:2px solid Black; border-right:2px solid Black}
</style>
<script>
/****************************************
蒋玉龙编制于2002-8-6 星期二
QQ:66840199
用时5个小时，功能：实现首行根据边框调整表格大小；
请保留相关信息
Powered by Stone, 2003-04-15
****************************************/
//记录鼠标状态, 记录鼠标按下, 记录当前列
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 οnmοusedοwn="downBody()" οnmοuseοver="moveBody()" οnmοuseup="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" οnclick="sort(this)" οnmοusemοve="moveCol(this)">01</td>
<td width="100" οnclick="sort(this)" οnmοusemοve="moveCol(this)">02</td>
<td width="100" οnclick="sort(this)" οnmοusemοve="moveCol(this)">03</td>
</tr>
<tr>
<td οnmοusemοve="moveCol(this)">04</td>
<td οnmοusemοve="moveCol(this)">09</td>
<td οnmοusemοve="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" οnclick="sort(this)" οnmοusemοve="moveCol(this)">01</td>
<td width="100" οnclick="sort(this)" οnmοusemοve="moveCol(this)">02</td>
<td width="100" οnclick="sort(this)" οnmοusemοve="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>
312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
