拖动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+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
Oct 10 Javascript
Js 正则表达式知识汇总
Dec 02 Javascript
完美实现仿QQ空间评论回复特效
May 06 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 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
php类常量的使用详解
2013/06/08 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
Nigma vs Alliance BO5 第二场2.14
2021/03/10 DOTA
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
python中实现字符串翻转的方法
2018/07/11 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
动物科学专业毕业生的自我评价
2013/11/29 职场文书
接受捐赠答谢词
2014/01/27 职场文书
中学生个人自我评价
2014/02/06 职场文书
销售目标责任书
2014/07/23 职场文书
党委班子对照检查材料
2014/08/19 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
办理房产证委托书
2014/09/18 职场文书
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js
使用CSS实现百叶窗效果示例代码
2023/05/07 HTML / CSS