实现拖动table标题实现改变td的大小

最新推荐文章于 2017-12-04 16:36:10 发布

iteye_2688

最新推荐文章于 2017-12-04 16:36:10 发布

阅读量103

点赞数

文章标签： javascript ViewUI

<html> 
<title>拖动列宽的表格</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<style type="text/css"><!-- 
.bg td{ 
    font-size:12px; 
    text-align:left; 
    line-height:15px; 
    height:20px; 
} 
.bg td.tit{ 
background-color:#e2e2e2; 
height:17px; 
    text-align:center; 
    line-height:15px; 
} 
.bg td.num{ 
background-color:#e2e2e2; 
    text-align:right; 
    line-height:15px; 
    width:30px; 
    height:22px; 
} 
.resizeDivClass{ 
text-align:right; 
width:1px; 
margin:0px 0 0px 0; 
background:#fff; 
border:0px; 
float:right; 
cursor:e-resize; 
} 
--></style> 
<script language="javascript"><!-- 
function MouseDownToResize(obj){ 
    setTableLayoutToFixed(); 
    obj.mouseDownX=event.clientX; 
    obj.pareneTdW=obj.parentElement.offsetWidth; 
    obj.pareneTableW=theObjTable.offsetWidth; 
    obj.setCapture(); 
} 
function MouseMoveToResize(obj){ 
if(!obj.mouseDownX) return false; 
var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX; 
if(newWidth>10) 
{ 
    var theObjTable = document.getElementById("theObjTable"); 
    obj.parentElement.style.width = newWidth; 
    theObjTable.style.width=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX; 
    } 
} 
function MouseUpToResize(obj){ 
    obj.releaseCapture(); 
    obj.mouseDownX=0; 
} 
function setTableLayoutToFixed() 
{ 
var theObjTable = document.getElementById("theObjTable"); 
if(theObjTable.style.tableLayout=='fixed') return; 
var headerTr=theObjTable.rows[0]; 
for(var i=0;i<headerTr.cells.length;i++) 
{ 
headerTr.cells[i].styleOffsetWidth=headerTr.cells[i].offsetWidth; 
} 

for(var i=0;i<headerTr.cells.length;i++) 
{ 
headerTr.cells[i].style.width=headerTr.cells[i].styleOffsetWidth; 
} 
theObjTable.style.tableLayout='fixed'; 
} 
function theObjTable(o,a,b,c){ 
    var t=document.getElementById(o).getElementsByTagName("tr"); 
    for(var i=0;i<t.length;i++){ 
        t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b; 
        t[i].οnclick=function(){ 
            if(this.x!="1"){ 
            }else{ 
                this.x="0"; 
                this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b; 
            } 
        } 
        t[i].οnmοuseοver=function(){ 
            if(this.x!="1")this.style.backgroundColor=c; 
        } 
        t[i].οnmοuseοut=function(){ 
            if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b; 
        } 
    } 
} 
// --></script> 
<body> 
<table width="100%" class="bg" border=1 cellspacing=0 bordercolorlight="#7b7b7b" bordercolordark="#efefef" id="theObjTable"> 
<tr> 
<td class="num">序号</td> 
<td width="100px" class="tit"> 
<span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span> 
公司名称 
</td> 
<td class="tit"> 
<span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span> 
订单客户 
</td> 
<td class="tit"> 
<span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span> 
部门 
</td> 
<td class="tit"> 
<span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span> 
业务员 
</td> 
<td class="tit"> 
<span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span> 
交款方式 
</td> 
</tr> 
<tr> 
<td class="num" >1</td> 
<td >中国电信</td> 
<td >订单客户名称</td> 
<td >广告部</td> 
<td >王天一</td> 
<td >现金</td> 
</tr> 
<tr> 
<td class="num" >2</td> 
<td >中国移动</td> 
<td >订单客户名称</td> 
<td >营销部</td> 
<td >李小红</td> 
<td >信用卡</td> 
</tr> 
<tr> 
<td class="num" >3</td> 
<td >中国联通</td> 
<td >订单客户名称</td> 
<td >市场部</td> 
<td >王老二</td> 
<td >银行卡</td> 
</tr> 
</table> 
<script language="javascript"><!-- 
//senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景"); 
theObjTable("theObjTable","#c0c0c0","#fff","#a3a2a2"); 
// --></script> 
</body> 
</html>

IE only from：http://www.jb51.net/article/21201.htm

iteye_2688

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现拖动table标题实现改变td的大小

&lt;html&gt; &lt;title&gt;拖动列宽的表格&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt; &lt;style type="text/css"&gt;&lt;!-- .bg td{ font-
复制链接

扫一扫