让HTML表格的边框可以拽动

转载 2004年10月12日 14:57:00
HTML中的Table的单元格是不能够通过鼠标拽动而改变大小的,如果想实现如同word中的表格一样可以通过鼠标拽动,就需要自己写函数了。可以通过两种方法来实现,一是直接写网页脚本,二是写htc扩展table的行为。我这里采用了htc扩展table行为的方法来实现它,好处是脚本代码的封装和引用都很方便。

下面是一个实现了基本功能的htc:

splitCellTable.htc:

<PUBLIC:COMPONENT ID=_SplitCellTable_Htc Name="SplitCellTable">
 <PUBLIC:PROPERTY NAME="version" VALUE="split cell table behavior 1.0" />
 <PUBLIC:PROPERTY NAME="author" VALUE="menghonbo" />

 <PUBLIC:METHOD NAME="SplitTo" INTERNALNAME="_SplitTo"/>

 <PUBLIC:EVENT NAME="onSpliting" ID="eventSpliting" />
 <PUBLIC:EVENT NAME="onSplited" ID="eventSplited" />

    <PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="on_initia()"/>
</PUBLIC:COMPONENT>
<SCRIPT LANGUAGE=javascript>
<!--
var marginSize = 5;
var status = 0;
var direction = 0;
var crtEleY = 0;
var crtEleX = 0;

function on_initia(){
 var _dragBorder = document.createElement("<div style='DISPLAY: none; FILTER: alpha( opacity=20 );POSITION: absolute;BACKGROUND-COLOR: black;overflow:hidden;'>");
 this.dragBorder = _dragBorder
 window.document.body.insertAdjacentElement("beforeEnd",_dragBorder);
 this.attachEvent("onmousemove",on_transMouse);
 this.attachEvent("onmouseout",on_mouseOut);
}

function on_transMouse(){
 this.style.cursor = "default";
 window.document.detachEvent("onmousemove",on_beginSplit);
 if(event.srcElement){
  if(event.srcElement.tagName=="TD"){
   crtObj = event.srcElement;
   if(event.offsetX < marginSize){
    this.style.cursor = "e-resize";
    direction = 1;
    if(crtObj.previousSibling)crtObj = crtObj.previousSibling;
   }
   if(event.offsetY < marginSize){
    this.style.cursor = "n-resize";
    direction=2;
    crtObj = crtObj.parentNode.previousSibling;
   }
   if(event.offsetX > (event.srcElement.offsetWidth - marginSize)){
    this.style.cursor = "e-resize";
    direction = 1;
   }
   if(event.offsetY > (event.srcElement.offsetHeight - marginSize)){
    this.style.cursor = "n-resize";
    direction=2;
   }
   window.document.attachEvent("onmousedown",on_beginSplit);
   status = 1;
  }
 }
}
function on_mouseOut(){
 window.document.detachEvent("onmousedown",on_beginSplit);
}
function on_beginSplit(){
 if(status!=1)return false;
 dragBorderShow();
 this.detachEvent("onmousemove",on_transMouse);
 window.document.attachEvent("onmousemove",dragMove);
 window.document.attachEvent("onscroll",dragMove);
 window.document.attachEvent("onmousemove",dragCheckState);
 window.document.attachEvent("onselectstart",dragSelect);
 window.document.attachEvent("onmouseup",fire_eventSplited);
 status = 2;
}

function dragBorderShow(){
 this.dragBorder.zIndex = 199;
 if(direction==1){
  this.dragBorder.style.height = window.document.body.offsetHeight - 10;
  this.dragBorder.style.width = 2;
  this.dragBorder.style.top = 2;
  this.dragBorder.style.left = event.clientX;
 }else if(direction==2){
  this.dragBorder.style.height = 2;
  this.dragBorder.style.width = window.document.body.offsetWidth - 25;
  this.dragBorder.style.top = event.clientY;
  this.dragBorder.style.left = 2;
 }
 this.dragBorder.style.display = "block";
 crtEleY = event.clientY;
 crtEleX = event.clientX;
}
function dragHide(){
 this.dragBorder.style.display = "none";
 this.dragBorder.style.height = "";
 this.dragBorder.style.top = "";
 this.dragBorder.style.left = "";
 this.dragBorder.style.width = "";
 this.dragBorder.zIndex = "";
}
function dragCheckState(){if(event.button != 1 )fire_eventSplited();}
function dragSelect(){return false;}
function dragMove(){
 if(event.button != 1){fire_eventSplited();return;}
 if(direction==2){
  this.dragBorder.style.top = event.clientY + window.document.body.scrollTop;
  if(event.clientY > window.document.body.clientHeight - 10 )window.scrollBy(0, 10);
  else if(event.clientY < 10){
   window.scrollBy(event.clientX, -10);
  }
 }else{
  this.dragBorder.style.left = event.clientX + window.document.body.scrollLeft;
  if(event.clientX > window.document.body.clientWidth - 10 )window.scrollBy(10,0);
  else if(event.clientX < 10){
   window.scrollBy(-10, event.clientY);
  }
 }
 fire_eventSpliting();
}

function fire_eventSpliting(){
 var oEvent  = document.createEventObject();
 if(direction==2)oEvent.scrollNum = event.clientY - crtEleY;
 else oEvent.scrollNum = event.clientX - crtEleX;
 eventSpliting.fire(oEvent);
}
function fire_eventSplited(){
 dragHide();
 var oEvent = document.createEventObject();
 if(direction==2){
  this.style.pixelHeight = this.clientHeight + (event.clientY - crtEleY); 
  crtObj.style.pixelHeight = crtObj.clientHeight + (event.clientY - crtEleY);
  oEvent.scrollNum = event.clientY - crtEleY;
 }else{
  this.style.pixelWidth = this.clientWidth + (event.clientX - crtEleX); 
  crtObj.style.pixelWidth = crtObj.clientWidth + (event.clientX - crtEleX)
  oEvent.scrollNum = event.clientX - crtEleX;
 }
 window.document.detachEvent("onmousemove",dragMove);
 window.document.detachEvent("onscroll",dragMove);
 window.document.detachEvent("onmousemove",dragCheckState);
 window.document.detachEvent("onmouseup",fire_eventSplited);
 window.document.detachEvent("onselectstart",dragSelect);
 this.attachEvent("onmousemove",on_transMouse);
 status = 0;
 eventSplited.fire(oEvent);
}
//-->
</SCRIPT>

 

在HTML的table中引用它

<TABLE id="myTable" cellSpacing=0 cellPadding=3 width="90%" border=1 style="behavior:url('splitCellTable.htc')">
   <TR>
    <TD>1</TD>
    <TD>2</TD>
    <TD>3</TD>
    <TD>4</TD>
    <TD>5</TD>
    <TD>6</TD></TR>
  <TR>
    <TD>1</TD>
    <TD>2</TD>
    <TD>3</TD>
    <TD>4</TD>
    <TD>5</TD>
    <TD>6</TD></TR>
  <TR>
    <TD>1</TD>
    <TD>2</TD>
    <TD>3</TD>
    <TD>4</TD>
    <TD>5</TD>
    <TD>6</TD></TR>
  <TR>
    <TD>1</TD>
    <TD>2</TD>
    <TD>3</TD>
    <TD>4</TD>
    <TD>5</TD>
    <TD>6</TD></TR></TABLE>

让HTML表格的边框可以拽动

HTML中的Table的单元格是不能够通过鼠标拽动而改变大小的,如果想实现如同word中的表格一样可以通过鼠标拽动,就需要自己写函数了。可以通过两种方法来实现,一是直接写网页脚本,二是写htc扩展ta...
  • smile2me27
  • smile2me27
  • 2004年07月02日 14:32
  • 3275

HTML小技巧:将table边框改为细线

HTML制作新手在用TABLE表格时,会碰到如何改变边线粗线,因为默认的TABLE边线设置即使是1px 是很粗的。因此会使用其他一些方法来制作出细线边框,这里介绍一种利用CSS来实现细线的方法,很有效...
  • hjp1137
  • hjp1137
  • 2015年09月10日 16:58
  • 4458

html中表格细边框的四种实现及其比较

第一种使用css .box { border-top-width: 1px; border-right-width: 0px; border-bottom-width: 0px; border-lef...
  • zrbin153
  • zrbin153
  • 2010年07月05日 20:01
  • 14974

html设置单元格暗边框颜色

设置单元格暗边框颜色 成绩 姓名 语文 数学 英语 物理 化学 ...
  • u010383937
  • u010383937
  • 2017年05月19日 07:55
  • 531

HTML的Table单元格无内容时不显示边框的解决方案

只需要在table的style中做如下定义即可。 border-collapse:collapse;empty-cell:show;">
  • tennisboy0317
  • tennisboy0317
  • 2013年10月10日 10:25
  • 1807

CSS设置html table表格边框样式

表格边框
  • qq_26327971
  • qq_26327971
  • 2017年03月13日 20:33
  • 1544

html实线边框的表格样式定义

实线边框的表格很大方,但是定义起来稍微有些麻烦的, 这个样式记住,可以套用  TABLE {  border-collapse:collapse;  border-left:solid 1 #0000...
  • henrytsu
  • henrytsu
  • 2008年12月04日 18:46
  • 3283

html设置单元格边框颜色

设置单元格边框颜色 考试成绩 姓名 语文 数学 英语 物理 化学 李 94 89 87 56 9...
  • u010383937
  • u010383937
  • 2017年05月19日 07:38
  • 528

html: 表格边框的设置

如果直接将table中的border置1,则表格的边框大于1。可以写两个table,一个作为背景,其背景颜色就是我们所有的边框颜色;另一个表格border="0" cellpadding="0" ce...
  • gavin_sw
  • gavin_sw
  • 2006年11月14日 18:23
  • 1813

html 表格嵌套 边框不重复的办法

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档...
  • jiafugui
  • jiafugui
  • 2011年08月16日 10:56
  • 5395
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:让HTML表格的边框可以拽动
举报原因:
原因补充:

(最多只允许输入30个字)