拖动table标题实现改变td的大小(css+js代码)


Posted in Javascript onApril 16, 2013
<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].onclick=function(){ 
if(this.x!="1"){ 
}else{ 
this.x="0"; 
this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b; 
} 
} 
t[i].onmouseover=function(){ 
if(this.x!="1")this.style.backgroundColor=c; 
} 
t[i].onmouseout=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>
Javascript 相关文章推荐
js写的评论分页(还不错)
Dec 23 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
js编写的treeview使用方法
Nov 11 Javascript
vue双向绑定简要分析
Mar 23 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
AngularJS实现select的ng-options功能示例
Jul 12 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
node通过express搭建自己的服务器
Sep 30 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 Javascript
JS前端可视化canvas动画原理及其推导实现
Aug 05 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 #Javascript
jquery表格内容筛选实现思路及代码
Apr 16 #Javascript
js实现图片轮换效果代码
Apr 16 #Javascript
js相册效果代码(点击创建即可)
Apr 16 #Javascript
jQuery实现点击标题输入详细信息
Apr 16 #Javascript
jQuery图片的展开和收缩实现代码
Apr 16 #Javascript
js变换显示图片的实例
Apr 16 #Javascript
You might like
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
2019/06/10 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
node.js获取参数的常用方法(总结)
2017/05/29 Python
python实现烟花小程序
2019/01/30 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
python 实现单通道转3通道
2019/12/03 Python
Python实现结构体代码实例
2020/02/10 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
Python 内存管理机制全面分析
2021/01/16 Python
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
德国足球商店:OUTFITTER
2019/05/06 全球购物
美国购物网站:Clickhere2shop
2021/01/28 全球购物
怎样创建、运行java程序
2014/08/01 面试题
校园报刊亭的创业计划书
2014/01/02 职场文书
消防器材管理制度
2014/01/28 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书
大学生个人总结范文
2015/02/15 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS