拖动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 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
Ext grid 添加右击菜单
Nov 26 Javascript
测试JavaScript字符串处理性能的代码
Dec 07 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
Javascript随机标签云代码实例
Jun 21 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 Javascript
微信小程序 WebSocket详解及应用
Jan 21 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
微信小程序云开发之新手环境配置
May 16 Javascript
vue-router 控制路由权限的实现
Sep 24 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
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
PHP GD 图像处理组件的常用函数总结
2010/04/28 PHP
php启动时候提示PHP startup的解决方法
2013/05/07 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
读jQuery之五(取DOM元素)
2011/06/20 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
浅谈JavaScript中this的指向更改
2020/07/28 Javascript
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
编程实现去掉XML的重复结点
2014/05/28 面试题
ktv中秋节活动方案
2014/01/30 职场文书
给实习单位的感谢信
2014/02/01 职场文书
活动总结书
2014/05/08 职场文书
合作合同协议书范本
2015/01/27 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书