拖动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 相关文章推荐
JavaScript 原型链学习总结
Oct 29 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
javascript实现随机显示星星特效
Jan 28 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 Javascript
微信小程序代码上传、审核发布小程序
May 18 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
antd form表单数据回显操作
Nov 02 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
JAVA/JSP学习系列之二
2006/10/09 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
JavaScript中的一些实用小技巧总结
2019/04/07 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
python基础教程之数字处理(math)模块详解
2014/03/25 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
python爬虫超时的处理的实例
2018/12/19 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
详解Python3中ceil()函数用法
2019/02/19 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
HTML5 input元素类型:email及url介绍
2013/08/13 HTML / CSS
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
违反课堂纪律检讨书
2014/01/19 职场文书
公司营业员的自我评价
2014/03/04 职场文书
奥运会口号
2014/06/13 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
奖学金个人总结
2015/03/04 职场文书