可以调节宽度和排序的表格

2008-10-08 17:26:00 | 【大 中 小】
01 02 03
04 09 10
05 08 11
06 07 12


01 02 03
04 05 06
07 08 09
10 11 12
13 14 15

点击表格的表头何以实现排序，拖动单元格间的线可以调整表格大小，功能不错哟

查看全部代码 View Code

第一步：
在<head>区添加样式表和脚本定义 

<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>

        /*****************************************************
         *  Share JavaScript (http://www.ShareJS.com)
         * 使用此脚本程序，请保留此声明
         * 获取此脚本以及更多的JavaScript程序，请访问 http://www.ShareJS.com
         ******************************************************/
    
/****************************************
蒋玉龙编制于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 = "w-resize";
  }
  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 = "w-resize";
 }
}

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 = "&nbsp;";
   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>


第二步：
在<body>区添加表格的HTML代码和启动脚本 
<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>标签添加相关响应事件 
<body onmousedown="downBody()" onmouseover="moveBody()" onmouseup="upBody()" onselectstart="selectBody()">

下载"可以调节宽度和排序的表格"

  • 本地下载
  • 本地下载2

推荐给朋友

上一篇： 角色扮演类游戏的人物控制  
下一篇： Base64编码加密、解密工具

相关资源