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

joe820302 2004-03-19 11:07:58

其中up.gif、down.gif表示排序的方向，大家自己做一个就OK了（10*10）。
先贴html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns:myTable>
<HEAD>
<TITLE>myTable</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=GB2312">
<style>

</style>
</HEAD>
<body onselectstart="event.returnValue = false;">



<table height="40%" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr height="20">
<td>
<myTable:title>
<table class="list" cellspacing="1" cellpadding="0" border="0">
<tr class="listTitle">
<td width="80">ID号</td>
<td width="80">ID号ID号ID号ID号ID号ID号</td>
<td width="80">编号</td>
<td width="80">姓名</td>
<td width="80">别名</td>
<td width="80">代号</td>
<td width="80">绰号</td>
<td width="80">性别</td>
<td></td>
</tr>
</table>
</myTable:title>
</td>
<td width="16"> </td>
</tr>
<tr>
<td colspan="2">
<myTable:body>
<table class="list" cellspacing="1" cellpadding="0" border="0">
<script>

</script>
</table>
</myTable:body>
</td>
</tr>
<tr height="20">
<td>
<myTable:bottom>
<table class="list" cellspacing="1" cellpadding="0" border="0">
<tr class="listTitle">
<td width="100%">程序开发： joe</td>
</tr>
</table>
</myTable:bottom>
</td>
<td width="16"> </td>
</tr>
</table>
 

<table height="40%" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr height="20">
<td>
<myTable:title>
<table class="list" cellspacing="1" cellpadding="0" border="0">
<tr class="listTitle">
<td width="80">ID号</td>
<td width="80">ID号ID号ID号ID号ID号ID号</td>
<td width="80">编号</td>
<td width="80">姓名</td>
<td width="80">别名</td>
<td width="80">代号</td>
<td width="80">绰号</td>
<td width="80">性别</td>
<td></td>
</tr>
</table>
</myTable:title>
</td>
<td width="16"> </td>
</tr>
<tr>
<td colspan="2">
<myTable:body>
<table class="list" cellspacing="1" cellpadding="0" border="0">
<script>

</script>
</table>
</myTable:body>
</td>
</tr>
<tr height="20">
<td>
<myTable:bottom>
<table class="list" cellspacing="1" cellpadding="0" border="0">
<tr class="listTitle">
<td width="100%">如有任何建议意见，请联系: joe_xubin@hotmail.com</td>
</tr>
</table>
</myTable:bottom>
</td>
<td width="16"> </td>
</tr>
</table>
</body>
</HTML>

...全文

240 15 打赏收藏转发到动态举报

写回复

用AI写文章

15 条回复

切换为时间正序

请发表友善的回复…

发表回复

kincky 2004-04-05

打赏
举报

mark一下

hbcb 2004-04-05

打赏
举报

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

ThisFellow 2004-04-05

打赏
举报

浏览器出错的我后来发现是因为titleInMyTable.htc中的
var theOrderImage = window.document.body.appendChild(document.createElement("img")); //用来显示排序的图片
造成的，原因可能是此时还不能保证页面load完成，所以body并不一定存在。
注释去此句就没有问题了。

另外，我试验了mozilla,不兼容的。请问 text-overflow: ellipsis; 这个风格在mozilla下有没有替代方案？另外，这个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();
}
}

ops2000 2004-04-05

打赏
举报

thead tbody tfoot ie里面已经有了

angel2a 2004-04-05

打赏
举报

这个……
不会很慢把

ThisFellow 2004-04-05

打赏
举报

很需要你的调整列宽的功能。
为什么我把三个文件保存在同一目录下，每次load的时候，总是出现：
Internet explore 无法打开 Internet站点file://E:\tmp\dymantable.html。已终止操作。

而此时可以看到上面的一个table已经显示出来，点击确定，出现“该页无法显示”页面。
dymantable.html是我自己随便为html页面起的文件名。
其他两个htc文件都是和你的文件命名相同。

而当我在titleInMyTable.htc的<script>下加入一个alert(0);的时候，这个问题就没有了，请问这是为什么？
我的浏览器是：6.0.2800.1106

另外，你的代码有没有测试过浏览器兼容性？

51windows 2004-03-22

打赏
举报

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

排序
http://www.51windows.net/hw/asp/jsview.asp?id=308

New小青龙 2004-03-22

打赏
举报

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

jrwx 2004-03-22

打赏
举报

joe820302 2004-03-19

打赏
举报

梅子前辈提的意见确实存在（1 不算，那是图片。）
2、3 曾有想法，在列标题上设置属性，指示排序的方法（按字符？数字？日期？...）
4、经过测试，50行的排序速度最多为15秒，100行就……………………排序算法有待优化

meizz 2004-03-19

打赏
举报

提几个意见:
1. 排序标志不见了
2. 排序没有分数字与字符
3. 排序没有针对中文
4. 排序的效率太低

joe820302 2004-03-19

打赏
举报

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>

joe820302 2004-03-19