巫溪企业网站建设-[网页制作]动态拖放表格的宽

2021-04-13 23:53 jianzhan
--------

巫溪企业网站建设

-------

动态性拖放表格的宽度编码

html

head

title 动态性拖放表格的宽度 /title

meta http-equiv= Content-Type content= text/html; charset=gb2312

script language= javascript

var dragenable=false;

var x;

var y;

var w;

var h;

var obj;

function init() 

{

    x=event.clientX+document.body.scrollLeft;  //获得x座标

    obj=event.srcElement;                      //获得电脑鼠标开启的元素

    w=event.srcElement.offsetWidth;            //目标的宽度

    obj.setCapture();                          //接纳电脑鼠标信息

    if(x event.srcElement.offsetLeft+w-5 x event.srcElement.offsetLeft+w) {//电脑鼠标挪动到目标界限时

    dragenable=true;obj.style.cursor= e-resize }//更改电脑鼠标的款式-左右拖动型

}

function drag() 

{

if(event.clientX+document.body.scrollLeft event.srcElement.offsetLeft+event.srcElement.offsetWidth-5 event.clientX+document.body.scrollLeft event.srcElement.offsetLeft+event.srcElement.offsetWidth)

{event.srcElement.style.cursor= e-resize } //更改电脑鼠标的款式-左右拖动型

else 

  event.srcElement.style.cursor= default //更改电脑鼠标的款式-默认设置型

    if(dragenable==true) {

if(event.clientX+document.body.scrollLeft-x+w 0) {

var i=obj.cellIndex;

var j;

for(j=0;j obj.parentNode.parentNode.rows.length;j++) {  //变更表格的宽度

obj.parentNode.parentNode.rows[j].cells[i].width=event.clientX+document.body.scrollLeft-x+w;

}

}

else {

var i=obj.cellIndex;

var j;

for(j=0;j obj.parentNode.parentNode.rows.length;j++) {

obj.parentNode.parentNode.rows[j].cells[i].width=1; //最少也要维持宽度为1

}

}

}

}

function end()                           //完毕变更

{

    dragenable=false;

    obj.releaseCapture();                //释放出来电脑鼠标的捕捉

    obj.style.cursor= default           //变更电脑鼠标的款式为默认设置

}

/script

/head

body bgcolor= #FFFFFF text= #000000 leftmargin=0 topmargin=0

表格宽度设定为百分比显示信息

br

table width= 60% border= 1 cellpadding= 0 cellspacing= 2 onmousedown=init() onmouseup=end() onmousemove=drag() id=table1 >

  tr

    td height= 18 align= top nbsp; /td

    td align= top nbsp; /td

    td align= top nbsp; /td

    td align= top nbsp; /td

  /tr

  tr

    td height= 18 align= top nbsp; /td

    td align= top nbsp; /td

    td align= top nbsp; /td

    td align= top nbsp; /td

  /tr

  tr

    td height= 18 align= top nbsp; /td

    td align= top nbsp; /td

    td align= top nbsp; /td

    td align= top nbsp; /td

  /tr

  tr

    td height= 18 align= top nbsp; /td

    td align= top nbsp; /td

    td align= top nbsp; /td

    td align= top nbsp; /td

  /tr

/table

/body

/html

动态性拖放表格的宽度编码共享结束

---------

巫溪企业网站建设

------------