html5改变表格的列宽,转:javascript 动态改变表格列的宽度!

(1)

'//****************************************

'蒋玉龙编制于2002-8-6     星期二

'QQ:66840199

'用时5个小时，功能：实现首行根据边框调整表格大小；

'请保留相关信息

'//****************************************

Dim     CurState     '记录鼠标状态

Dim     CurDown     '记录鼠标按下

Dim     CurId     '记录当前Id

Dim     OldPlace,NewPlace

Sub     MoveCol(MyColId)

window.status     =window.document.body.scrollLeft

If     CurDown=False     Then     '鼠标没有按下

If     window.event.x     +     window.document.body.scrollLeft     >     CurTable     +     window.document.body.all(CurId).offsetLeft     +     window.document.body.all(CurId).offsetWidth-3     Then

'移动到了相应的部位/改变鼠标

CurState=True

window.document.body.style.cursor="move"

Else

CurState=False

window.document.body.style.cursor="Default"

End     If

CurId=MyColId

End     If

End     Sub

Sub     UpBody()     '鼠标抬起/一切恢复原状态

If     CurState=True     Then

'***************************调整表格**************************

'调整条件:(层左侧+线左侧=线绝对左侧坐标)>目标的左侧坐标+20

NewPlace=window.event.x     +     window.document.body.scrollLeft

If     (MyDiv.offsetLeft     +     MyLine.offsetLeft)     >     CurTable     +     window.document.body.all(CurId).offsetLeft     +20     Then

window.document.body.all(CurId).Width     =     window.document.body.all(CurId).Width     -     (OldPlace     -     NewPlace)

MyTable.width=MyTable.Width     -     (OldPlace     -     NewPlace)

window.document.body.all(CurId).innertext=window.document.body.all(CurId).Width

End     If

'*************************************************************

CurState=False

CurDown=False

MyDiv.style.display="None"

window.document.body.style.cursor="Default"

End     If

End     Sub

Sub     DownBody()     '鼠标按下

If     CurState=True     Then

CurDown=True

'*********定位竖线**********

MyDiv.style.display=""                         '层可见

MyLine.style.Height=     MyTable.offsetHeight

MyLine.style.width     =     1

MyDiv.style.Left     =     window.event.x     +     window.document.body.scrollLeft     -     MyLine.offsetLeft

MyDiv.style.Top     =     MyTable.offsetTop     -     MyLine.offsetTop

'***************************

OldPlace=window.event.x     +     window.document.body.scrollLeft

End     If

End     Sub

Sub     MoveBody()     '鼠标移动

If     CurDown=True     Then     '鼠标按下状态

MyDiv.style.Left     =     window.event.x     +     window.document.body.scrollLeft     -     MyLine.offsetLeft

window.document.body.style.cursor="move"

End     If

End     Sub

Sub     SelectBody()     '鼠标选择文本[不支持动态调整？]

If     CurDown=True     Then     '鼠标按下于调整状态

window.event.returnvalue=False

End     If

End     Sub

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

Dim     CurTable

CurTable=MyTable.offsetLeft

Dim     TabII,TabJJ

Dim     CurWidth

For     TabII=0     To     (MyTable.Rows.length-1)

For     TabJJ=0     To     (MyTable.Rows(TabII).cells.length-1)

If     MyTable.Rows(TabII).cells(TabJJ).innerHtml=""     Then

MyTable.Rows(TabII).cells(TabJJ).innerHtml=" "

End     If

CurWidth="1"

If     TabII=0     Then     '第一行

CurWidth="2"

End     If

MyTable.Rows(TabII).cells(TabJJ).Style.bordertop=CurWidth     &     "px     solid     Black"

CurWidth="1"

If     TabJJ=0     Then     '第一列

CurWidth="2"

End     If

MyTable.Rows(TabII).cells(TabJJ).Style.borderleft=CurWidth     &     "px     solid     Black"

If     TabII=(MyTable.Rows.length-1)     Then     '最后一行

MyTable.Rows(TabII).cells(TabJJ).Style.borderbottom="2px     solid     Black"

End     If

If     TabJJ=(MyTable.Rows(TabII).cells.length-1)     Then     '最后一列

MyTable.Rows(TabII).cells(TabJJ).Style.borderright="2px     solid     Black"

End     If

Next

Next

(2)

信息列表

.aline{

position:absolute;

width:1px;

height:100px;

background-color:#000000;

}

.headdiv{

width:100%;

cursor:default;

height:100%;

white-space:nowrap;

text-align:center;

text-valign="middle";

}

tr{

background: window;

}

td{

color: windowtext; font: menu; padding: 1px; padding-left: 5px; padding-right: 5px;

border-top: 1px solid buttonhighlight;

border-left: 1px solid buttonhighlight;

border-right: 1px solid buttonshadow;

border-bottom: 1px solid buttonshadow;

}

table{

BORDER-COLLAPSE: collapse;

border-top: 1px solid buttonshadow;

border-left: 1px solid buttonshadow;

}

thead td{

background: buttonface;

font: menu;

border: 1px outset white;

cursor: default;

padding:0 3 0 0;

border-top: 1px solid buttonhighlight;

border-left: 1px solid buttonhighlight;

border-right: 1px solid buttonshadow;

border-bottom: 1px solid buttonshadow;

height:16px;

}

/**

* 动态改变列宽度的代码

* 作者：黑旋风(QQ：23929003 EMAIL:lewclear97@163.com)

* 版权没有，随便拷贝、修改，不过希望大家能把改后的代码发给我一份，互相学习，谢谢

*/

var ListTitleTdStartX=null;//记录鼠标按下时的X坐标

var ListTitleTdStartWidth=0;//记录所在td在鼠标按下时的宽度

var ListTableStartWidth=0;//记录整个table的宽度

var MouseIsDown=false;//表示是否处于鼠标按下状态

var ListTableResizeTd=null;//记录所操作的td对象

var ListResizeLine=null;

/**

*鼠标按下时触发的事件

*其作用主要是记录所需部件的初始值

*/

function MouseDownResizeTd(obj){

if(event.srcElement.id!="resizehead"){

return;

}

allleft=event.srcElement.offsetLeft+obj.parentElement.parentElement.parentElement.offsetLeft;

if(setOperatorTd(obj,allleft)){//设置操作的td

ListResizeDiv=ListTableResizeTd.parentElement.parentElement.parentElement;//外层div

ListTitleTdStartX=event.x;  //记录初始值

ListTitleTdStartWidth=parseInt(obj.clientWidth);

ListTableStartWidth=parseInt(ListTableResizeTd.parentElement.parentElement.parentElement.clientWidth)

MouseIsDown=true;

ListResizeLine=document.createElement("div");

ListResizeLine.className='aline';

document.body.appendChild(ListResizeLine);

ListResizeLine.style.height=ListResizeDiv.offsetHeight

ListResizeLine.style.left=document.body.scrollLeft+event.x-2;

ListResizeLine.style.top=ListResizeDiv.offsetTop;

ListTableResizeTd.setCapture();

}

}

/**

* 判断哪个才是所要操作的td

* 成功获得返回true，否则返回false

*/

function setOperatorTd(obj,allleft){

if(event.x-allleft<3){//如果按到的是下一个td

tableobj=obj.parentElement.parentElement.parentElement;

for(var i=0;i

if(tableobj.rows[0].cells[i]==obj){

if(i==0)return false;

ListTableResizeTd=tableobj.rows[0].cells[i-1];

return true;

}

}

}else{

ListTableResizeTd=obj;

return true;

}

}

/**

*双击设置最合适宽度

*/

function setMinWidthForTd(){

ListTableResizeTd.style.width='20px'

}

/**

*鼠标松开将一切参数还原

*/

function document.onmouseup(){

if(MouseIsDown){

width=event.x-ListTitleTdStartX;

if(Math.abs(width)>2&&width+ListTitleTdStartWidth>0){

ListTableResizeTd.style.width=ListTitleTdStartWidth+width;

//ListTableResizeTd.parentElement.parentElement.style.width=ListTableStartWidth+width;

}

//参数全部还原

ListTitleTdStartX=null;

ListTitleTdStartWidth=0;

ListTableStartWidth=0;

MouseIsDown=false;

document.body.removeChild(ListResizeLine);

}

if(ListTableResizeTd!=null){

ListTableResizeTd.releaseCapture();

}

}

/*

*鼠标移动时改变td及所在table的宽度

*/

function document.onmousemove(){

if(MouseIsDown){

ListResizeLine.style.left=document.body.scrollLeft+event.x-2;

}

}

姓名

性别

电话

住址

政治面貌

学历

备注

for(i=0;i<10;i++){

var html='

';

html+='

人员'+i+'';

html+='

男';

html+='

45345';

html+='

asdfasfasfasfasdf';

html+='

sffdfgdgd';

html+='

sfdgdfgdfg';

html+='

asdfasfasfasfasdfdfgdfg';

html+='

';

document.write(html);

}

javascript 动态改变表格列的宽度