display:table标签来自动改变列宽 改变的同时table的整体宽度跟随变化
2013-08-12 16:54
387 查看
发现公司里的所有分页功能都是通过display:talbe来实现的,但是用户最近说要让表格列宽可以拖动;所有我就寻找了好多的办法;网上找了很多的资料,但是都不是我要的效果因为他们都是列宽不改变要不就是我看不懂!
我模仿网上的核心代码来自己写了一个;因为我们知道display:table标签最后再页面展示的还是table表格所以我就在页面的最后面来更改table的样式:思路:
1,捕获鼠标移动到表格竖线上时候改变鼠标样式:
2. 在改变样式的区域里,按下鼠标就会生成辅助线来拖动;同时设置单元格最小宽度为8px
3. 改变表头单元格宽度,改变表格宽度
素材下载:http://download.csdn.net/detail/ydcun/5915563
我做了一个用Myeclipse开发的index.jsp页面:工程源码下载
function TableAuto(divId){ var cellIndex=-1; //记录所作用的列索引 var preWidth=0; //记录列的原宽 var preX=0; //记录鼠标的原屏幕x坐标 var preLeft=0; //记录辅助线的初始位置 var currentTitleCell=null; //当前改变列宽的列的标题单元格 var doTitleCellClick=null; //用于暂存标题行click响应行数 var table = null;//表格对象 var titleCells = null;//获取标题行 //辅助线对象 var scale = document.createElement("div"); scale.style.cssText="border-left:dotted 1px #000;z-index:101;position:absolute;left:-1;width:0;"; document.body.appendChild(scale); //函数:计算元素的绝对位置 function getAbsPos(e){ var rect = e.getBoundingClientRect() var body = document.body; return { left:rect.left+body.scrollLeft,top:(rect.top+body.scrollTop) }; } //函数:改变列宽 (响应辅助线的 onmousemove 事件) function changeColWidth(){ var evt = arguments.length==0 ? event : arguments[0]; var newX = evt.screenX; var newWidth = preWidth+newX-preX; if(newWidth<8) newWidth=8; else scale.style.left=preLeft+newX-preX; } //函数:改变列宽 (响应辅助线 onmouseup 事件) function changeColWidthStop(){ scale.releaseCapture(); scale.onmousemove = null; scale.onmouseup = null; scale.style.left=-1; var evt = arguments.length==0 ? event : arguments[0]; var newX = evt.screenX;//鼠标现在坐标 var mLong = newX-preX;//鼠标移动距离 var tdNewWidth = mLong+preWidth;//调整后单元格宽度 if(tdNewWidth<8) tdNewWidth=8; var tableNewWidth=eval($('#'+divId).width()-preWidth+tdNewWidth);//表格宽度=原始宽度表格宽度-单元格原始宽度+单元格现在宽度 var trs = table.getElementsByTagName("tr"); $('#'+divId).width(tableNewWidth);//调整表格宽度 //for ( var j = 0; j < trs.length; j++) {//调整列宽 trs[0].cells[cellIndex].width =tdNewWidth; //} } //函数:改变列宽 (响应标题行单元格的 onmousedown 事件) function doMouseDown(){ var evt = arguments.length==0 ? event : arguments[0]; preX = evt.screenX; var pos = getAbsPos(this); preLeft = pos.left+this.offsetWidth; scale.style.left=preLeft-2; scale.style.top = pos.top-2; scale.style.height=table.offsetHeight-4; scale.setCapture(); scale.onmousemove = changeColWidth; scale.onmouseup = changeColWidthStop; cellIndex = this.cellIndex; preWidth = this.offsetWidth; } //函数:响应标题单元格 mousemove 事件 function doTitleCellMousemove(){ var evt = arguments.length==0 ? event : arguments[0]; if(this.offsetWidth-evt.offsetX<10){//单元格的宽-鼠标在单元格的水平坐标 this.style.cursor="col-resize"; this.onmousedown=doMouseDown; }else{ this.style.cursor=""; this.onmousedown=null; } } //添加控制元素的代码 function applyCtrl(tableId){ table = document.getElementById(tableId);//获取表格 table.getElementsByTagName("tr")[0].className="scrollColThead"; //获取标题行 titleCells = table.getElementsByTagName("tr")[0].cells; //给每个标题行单元格绑顶 onmousemoce 事件处理函数 for(var i=1;i<titleCells.length;i++){ titleCells[i].onmousemove=doTitleCellMousemove; } } //此处为表格添加控制元素。 applyCtrl(divId); }
有不清楚的很愿意与大家交流:ydcun@163.com
相关文章推荐
- display:table标签来自动改变列宽 改变的同时table的整体宽度跟随变化
- 1)复选框中文字在左边;2)水平滚动条最小值为4、最大值为72;且在窗体Load事件中通过代码设置;3)单击任何复选框,标签上文字样式都发生变化;4)单击任意单选按钮,标签上文字字体都发生改变;5)拖
- span标签使用display高度改变、float父辈元素塌陷问题
- 最流行强大的页面标签框架 display:table 使用
- easyUI中的table的标签为下拉选择东西动态改变值
- 58.UITableView:改变 TableHeaderView 的高度--跟随cell滚动
- 改变label的宽度高度值之display:inline-block属性
- 动态缩减table列时,table宽度自适应,tr下不同td数改变td的colspan属性值(IE8兼容)
- display:table在自动获取实际宽度的作用
- js 实现table每列可左右拖动改变列宽度
- display: table; 100%的宽度
- JS实现可改变列宽的table实例
- 网站导航标题栏下面有一小色块跟随鼠标移动,同时色块颜色改变的特效
- Atitit 遍历文件夹目录解决方案与规范 attilax总结 1. 规范 2 1.1. 注意的不要同时改变文件夹内容,增删文件。这样获取到的目录list不会变化 2 1.2. 主义中文名称文件读写
- 固定td标签的宽度,table边框1像素
- 可拖动拉伸的左右分栏效果,本例子是用Table以及JS来实现的,左右分栏可改变,拖动中间的边框就可实现宽度的调整,点击时可设置为隐藏左侧列表。
- table的默认宽度之变化
- 利用ul li 标签实现table表格的效果 (li内容超出ul设定的宽度时不换行)
- iOS UITableView(四) 为tableView设置头尾视图,改变cell的宽度,cell的缩进
- 可以拖动改变table列宽的sample