可以拖动表头改变列的宽度

来源：互联网发布：mysql区分大小写吗编辑：程序博客网时间：2024/05/17 05:02

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
</head>
<style type="text/css">
.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;
}
</style>

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';
   ListResizeLine.style.width="3px";
   document.body.appendChild(ListResizeLine);
   ListResizeLine.style.height=ListResizeDiv.offsetHeight
   ListResizeLine.style.left=document.body.scrollLeft+event.x-2;
   ListResizeLine.style.top=ListResizeDiv.offsetTop+"14";
   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<tableobj.rows.length;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;
}
}
</script>

</table>
</form>
</body>
</html>