| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 852 人关注过本帖
标题:如何拖动列宽的表格后,浏览器会把拖动后的列宽记住,免得每次都去拖动?
只看楼主 加入收藏
qjw9004
Rank: 1
等 级:新手上路
帖 子:89
专家分:0
注 册:2011-1-27
结帖率:47.37%
收藏
已结贴  问题点数:0 回复次数:5 
如何拖动列宽的表格后,浏览器会把拖动后的列宽记住,免得每次都去拖动?
以下代码是我从百度搜索到了,但想到能否做到拖动后浏览器自动记住列宽免得每次都去拖动!~~
<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';  
}  
</script>  
<script language="javascript"><!--
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 百度搜索 content center 
2011-10-12 12:46
qjw9004
Rank: 1
等 级:新手上路
帖 子:89
专家分:0
注 册:2011-1-27
收藏
得分:0 
没有人施招吗?
2011-10-12 22:37
scilent
Rank: 9Rank: 9Rank: 9
等 级:蜘蛛侠
帖 子:285
专家分:1399
注 册:2011-8-9
收藏
得分:40 
不明白楼主的意思,列宽不是在服务器端设定的吗?网页上的表格如果不是嵌入的,是不是不能拖动啊

在没有路的地方走一条路,让别人有路可走
2011-10-13 08:50
qjw9004
Rank: 1
等 级:新手上路
帖 子:89
专家分:0
注 册:2011-1-27
收藏
得分:0 
我想用cookie把列宽记下,打开刷新不用再去拖动~~
以下是有个朋友给出以下代码
很遗憾,初学的对代码的应用还在学习中!期待一个实例的

//取cookie
Cookie[] cookies = request.getCookies();
if(cookies != null){
for(Cookie cookie : cookies){
if(cookie.getName().equals(列名)){
return cookie.getValue(); //列宽
……
2011-10-13 10:47
qjw9004
Rank: 1
等 级:新手上路
帖 子:89
专家分:0
注 册:2011-1-27
收藏
得分:0 
有人指点吗?
2011-10-16 20:30
qjw9004
Rank: 1
等 级:新手上路
帖 子:89
专家分:0
注 册:2011-1-27
收藏
得分:0 
有人施招吗?
2011-10-23 19:43
快速回复:如何拖动列宽的表格后,浏览器会把拖动后的列宽记住,免得每次都去拖动 ...
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.031701 second(s), 10 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved