前些天用htc解决table的一些常见用法：表头与表体分离，点击表头排序，列宽可调整 （望大家支持）

Question

bodyInMyTable.htc<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="selectRow()"/>
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="unSelectRow()"/>
<PUBLIC:ATTACH EVENT="onscroll" ONEVENT="scroll()"/><SCRIPT LANGUAGE="JavaScript">
function selectRow(){
//鼠标浮动的行反亮标记
var theRow = event.srcElement;
if (theRow.tagName=="TABLE"){
return false;
}
while (theRow.tagName!="TR"){
theRow = theRow.parentElement;
}
theRow.className = "selectedContent";
}function unSelectRow(){
//鼠标移出时，行的反亮标记取消
var theRow = event.srcElement;
if (theRow.tagName=="TABLE"){
return false;
}
while (theRow.tagName!="TR"){
theRow = theRow.parentElement;
}
theRow.className = "listContent";
}function scroll(){
//滚动时（X轴）需要调整<myTable:title>的滚动条，两者需要同步
var titleInMyTable = getTitleInMyTable()
titleInMyTable.scrollLeft = scrollLeft;
titleInMyTable.changeBorderPosion(parseInt(scrollLeft));
}function getTitleInMyTable(){
//获得<myTable:title>对象
var theTable = this;
while (theTable.tagName!="TABLE"){
theTable = theTable.parentElement;
}
return theTable.rows(0).cells(0).children(0);
}
</SCRIPT>---------------------------------------------------titleInMyTable.htc<PUBLIC:ATTACH EVENT="onload" ONEVENT="init()" FOR="window"/>
<PUBLIC:ATTACH EVENT="onclick" ONEVENT="bubbleSortRows()"/>
<PUBLIC:METHOD NAME="changeBorderPosion" /><SCRIPT LANGUAGE="JavaScript">
var theDivs = new Array; //title里的白色边框
var movingBorder = null; //正在移动的白色边框
var orderSmall2Big = true; //正、倒序排列标记
var orderIndex = -1; //当前排序列
var theOrderImage = window.document.body.appendChild(document.createElement("img")); //用来显示排序的图片
theOrderImage.style.width = "15px";
theOrderImage.style.height = "15px";
theOrderImage.style.position = "absolute";
theOrderImage.style.display = "none";
theOrderImage.style.zIndex = 0;function getBodyInMyTable(){
//获得<myTable:body>对象
var theTable = this;
while (theTable.tagName!="TABLE"){
theTable = theTable.parentElement;
}
return theTable.rows(1).cells(0).children(0);
}function move(){
//调整列宽
var wid = parseInt(children(0).cells(movingBorder.index).width) + (event.clientX-tmpPosition);
if (wid<1){
wid = 1;
}
children(0).cells(movingBorder.index).width = wid;
var bodyInMyTable = getBodyInMyTable();
for (var i=0;i<bodyInMyTable.children(0).rows.length;i++){
bodyInMyTable.children(0).rows(i).cells(movingBorder.index).width = wid;
}
changeBorderPosion(parseInt(scrollLeft));
tmpPosition = event.clientX;
}function beginMove(){
//调整列宽前的准备
tmpPosition = event.clientX;
movingBorder = event.srcElement;
movingBorder.attachEvent("onmousemove",move);
movingBorder.setCapture();
}function endMove(){
//结束调整列宽
movingBorder.detachEvent("onmousemove",move);
movingBorder.releaseCapture();
movingBorder.style.backgroundColor="#ffffff";
}function init(){
//页面装载时设置白色边框
for (var i=1;i<children(0).rows(0).cells.length;i++){
var theCell = children(0).rows(0).cells(i);
var theDiv = window.document.body.appendChild(document.createElement("div"));
theDiv.index = i-1;
theDiv.style.width = "1px";
theDiv.style.position = "absolute";
theDiv.style.left = getIEPos(theCell,"Left")-1;
theDiv.style.top = getIEPos(theCell,"Top");
theDiv.style.cursor = "e-resize";
theDiv.style.zIndex = 0;
theDiv.style.backgroundColor = "#ffffff";
theDiv.innerText = "";
theDiv.setAttribute("onmousedown",function (){beginMove();});
theDiv.setAttribute("onmouseup",function (){endMove();});
theDiv.setAttribute("onmouseover",function (){this.style.backgroundColor="#000000";this.style.width="2px";});
theDiv.setAttribute("onmouseout",function (){this.style.backgroundColor="#ffffff";this.style.width="1px";});
theDivs.push(theDiv);
}
}function changeBorderPosion(leftMove){
//白色边框的位置调整
if (isNaN(leftMove)){
leftMove = 0;
}
for (var i=0;i<theDivs.length;i++){
var theCell = children(0).rows(0).cells(i+1);
theDivs[i].style.left = getIEPos(theCell,"Left")-1-leftMove;
}
if (movingBorder!=null && movingBorder.index<orderIndex+1){
theOrderImage.style.left = getIEPos(children(0).cells(orderIndex),"Left")+children(0).cells(orderIndex).offsetWidth-20-leftMove;
}
}function getIEPos(elt,which) {
//获取对象的绝对位置信息（如offsetLeft,offsetTop）
var iPos = 0;
while (elt!=null) {
iPos += elt["offset" + which];
elt = elt.offsetParent;
}
return iPos;
}function bubbleSortRows(){
//客户端排序
var theCell = event.srcElement;
if (theCell.tagName=="TABLE"){
return false;
}
while (theCell.tagName!="TD"){
theCell = theCell.parentElement;
}
if (orderIndex!=theCell.cellIndex){
orderSmall2Big = true;
orderIndex = theCell.cellIndex;
}
if (orderIndex+1==children(0).cells.length){
return false;//最后一列是空列，不参与排序
}
theOrderImage.style.left = getIEPos(theCell,"Left")+theCell.offsetWidth-20-parseInt(scrollLeft);
theOrderImage.style.top = getIEPos(theCell,"Top");
theOrderImage.style.display = "";
if (orderSmall2Big){
theOrderImage.src = "up.gif";
}else{
theOrderImage.src = "down.gif";
}
var bodyInMyTable = getBodyInMyTable();
var n = bodyInMyTable.children(0).rows.length-1;
var  i,j;
var exchange;
for(i=0;i<n;i++){
exchange=false;
if (i!=n-1){
window.status = "正在排序，请稍候...";
}else{
window.status = "完毕";
}
for(j=n-1;j>=i;j--){
if (orderSmall2Big){
if(bodyInMyTable.children(0).rows(j+1).cells(theCell.cellIndex).children(0).children(0).innerHTML<bodyInMyTable.children(0).rows(j).cells(theCell.cellIndex).children(0).children(0).innerHTML){
bodyInMyTable.children(0).rows(j+1).swapNode(bodyInMyTable.children(0).rows(j));
exchange=true;
}
}else{
if(bodyInMyTable.children(0).rows(j+1).cells(theCell.cellIndex).children(0).children(0).innerHTML>bodyInMyTable.children(0).rows(j).cells(theCell.cellIndex).children(0).children(0).innerHTML){
bodyInMyTable.children(0).rows(j+1).swapNode(bodyInMyTable.children(0).rows(j));
exchange=true;
}
}
}
if(!exchange){
window.status = "完毕";
break;
}
}
orderSmall2Big = !orderSmall2Big;
}
</SCRIPT>

Answer 1

以前没重视过客户端排序，因为接触的项目向来是再次提交服务器然后排序（且每页不超过50条）。
现在的这个客户端排序采用冒泡法，并进行tr的swapNode。效率确实低下。
仍在搜索高效的排序算法

Answer 2

如果一页上的数据有限,可以下载到数组,用数组的sort()方法来排序后,遍历数组重新生成表格就可以了,速度还可以的。

Answer 3

表头，表体
http://www.51windows.net/hw/asp/jsview.asp?id=314排序
http://www.51windows.net/hw/asp/jsview.asp?id=308

Answer 4

很需要你的调整列宽的功能。
为什么我把三个文件保存在同一目录下，每次load的时候，总是出现：
Internet explore 无法打开 Internet站点file://E:\tmp\dymantable.html。已终止操作。而此时可以看到上面的一个table已经显示出来，点击确定，出现“该页无法显示”页面。
dymantable.html是我自己随便为html页面起的文件名。
其他两个htc文件都是和你的文件命名相同。而当我在titleInMyTable.htc的<script>下加入一个alert(0);的时候，这个问题就没有了，请问这是为什么？
我的浏览器是：6.0.2800.1106另外，你的代码有没有测试过浏览器兼容性？

Answer 5

thead tbody tfoot ie里面已经有了

Answer 6

浏览器出错的我后来发现是因为titleInMyTable.htc中的
var theOrderImage = window.document.body.appendChild(document.createElement("img")); //用来显示排序的图片
造成的，原因可能是此时还不能保证页面load完成，所以body并不一定存在。
注释去此句就没有问题了。另外，我试验了mozilla,不兼容的。请问 text-overflow: ellipsis; 这个风格在mozilla下有没有替代方案？另外，<nobr>这个tag是其什么作用的。在实验的时候，我发现如果将鼠标拖拽列宽小于0的时候，以后的鼠标处理就序会有异常。所以我做了一点改修，不知道这样改会不会由其他问题。
function move(){
//调整列宽
 var wid = parseInt(children(0).cells(movingBorder.index).width) + (event.clientX-tmpPosition);
 var tooNarrow = (wid < 1);
 if (tooNarrow){
  wid = 1;
 }
 children(0).cells(movingBorder.index).width = wid;
 var bodyInMyTable = getBodyInMyTable();
 for (var i=0;i<bodyInMyTable.children(0).rows.length;i++){
  bodyInMyTable.children(0).rows(i).cells(movingBorder.index).width = wid;
 }
 changeBorderPosion(parseInt(scrollLeft));
 tmpPosition = event.clientX;
 
 if(tooNarrow){
  endMove();
 }
}

Answer 7

学习中，好象我用得到的，移动列宽我需要，最好能够保存列宽，免得次次要手动，我不用它来排序我可以调用服务器上的sort 来排序，功能最强大