拖动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面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
用js调用迅雷下载代码的二种方法
Apr 15 Javascript
利用JS判断用户是否上网(连接网络)
Dec 23 Javascript
js使用循环清空某个div中的input标签值
Sep 29 Javascript
JavaScript中数组成员的添加、删除介绍
Dec 30 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
Jan 17 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
Jun 21 Javascript
JS中的继承操作实例总结
Jun 06 Javascript
在vue中嵌入外部网站的实现
Nov 13 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速度全攻略
2006/10/09 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
PHP使用mysqldump命令导出数据库
2015/04/14 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
Javascript中的this绑定介绍
2011/09/22 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
Extjs4中的分页应用结合前后台
2013/12/13 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
python实现定制交互式命令行的方法
2014/07/03 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
python requests证书问题解决
2019/09/05 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
阿根廷票务网站:StubHub阿根廷
2018/04/13 全球购物
什么是索引指示器
2012/08/20 面试题
企业口号大全
2014/06/12 职场文书
人事聘任通知
2015/04/21 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js
java基础——多线程
2021/07/03 Java/Android
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android
python基础之//、/与%的区别详解
2022/06/10 Python
js作用域及作用域链工作引擎
2022/07/07 Javascript