display:table标签来自动改变列宽 改变的同时table的整体宽度跟随变化
来源:互联网 发布:ubuntu 编译c 编辑:程序博客网 时间:2024/06/06 20:11
发现公司里的所有分页功能都是通过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的整体宽度跟随变化
- 拖动改变Table的列宽度
- 拖动改变Table的列宽度
- 改变table列宽
- js改变table标签的背景
- 可以拖动改变table列宽的sample
- 如何动态改变Table Control的列抬头
- 如何动态改变Table Control的列抬头
- 动态缩减table列时,table宽度自适应,tr下不同td数改变td的colspan属性值(IE8兼容)
- table的默认宽度之变化
- 改变table中的标签值
- 关于table固定列宽度的解决方案
- js 实现table每列可左右拖动改变列宽度
- CSS的 display : table 以表格形式去改变渲染(不具语义误导)
- 可以拖动表头改变列的宽度
- table中表格内的内容自动换行不改变表格宽度
- table中内容过长,table改变的问题
- js动态改变table的text值
- 关于android设备不自带sqlite3问题(sqlite3 not found)
- Python调用C语言代码
- Qt样式表的使用
- 唯一拥有的东西-关于(忆)
- Andriod JNI编程之C++回调Java函数
- display:table标签来自动改变列宽 改变的同时table的整体宽度跟随变化
- appscan 安全漏洞修复
- C++ VS2008 基本写法
- Gartner下调2013年全球IT支出预期(图)
- 学习C语言方法
- Oracle中删除用户和表空间的常见问题(比如:ORA-01940无法删除当前已连接用户的解决方案)
- HDU 4455 Stealing a Cake(计算几何 点到圆 到矩形距离)
- python 字符串和日期之间转换 StringAndDate
- http头信息