标签：size first net css 20px 拖拽 watch false eve
效果：可鼠标拖动td，动态修改它们的宽度
html：
<html> <head> <title>table拖动(兼容Firefox 3.5/IE6)，固定表格宽度</title> <meta content="charset=utf-8"> <link rel="stylesheet" href="css/22.css" /> </head> <body> <table class="bg" width="60%" border="1" cellspacing="0" cellpadding="0" bordercolorlight="#7b7b7b" bordercolordark="#efefef" id="theObjTable"> <tr> <td class="num">序号</td> <td class="tit"> <span class="resizeDivClass" id="drag"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span> 公司名称 </td> <td class="tit"> <span class="resizeDivClass" id="drag2"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span> 订单客户 </td> <td class="tit"> <span class="resizeDivClass" id="drag3"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span> 部门 </td> <td class="tit"> <span class="resizeDivClass" id="drag4"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span> 业务员 </td> <td class="tit"> 交款方式 </td> </tr> <tr> <td class="num">1</td> <td> <div style="white-space:nowrap;overflow:hidden;width:100%;">脚本脚本之家脚本之家脚本之家脚本之家脚本之家脚本之家脚本之家脚本之家脚本之家脚本之家脚本之家脚本之家脚本之家脚本之家之家</div> </td> <td> <div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%">jb51.net</div> </td> <td>广告部</td> <td>王天一</td> <td>现金</td> </tr> </table> </body> <script type="text/javascript" src="js/22.js" ></script> </html>
css：
.bg { font-size: 12px; color: #000000; table-layout: fixed; //这个属性可以隐藏文字 } .bg td { font-size: 12px; color: #000000; text-align: left; line-height: 15px; height: 20px; } .bg td.tit { background-color: #e2e2e2; color: #000; height: 17px; text-align: center; line-height: 15px; } .bg td.num { background-color: #e2e2e2; color: #000; text-align: right; line-height: 15px; height: 22px; width: 30px; } .resizeDivClass { text-align: right; width: 3px; margin: 0px 0 0px 0; background: #fff; border: 0px; float: right; cursor: e-resize; }
js：
window.onload = function() { drag(document.getElementById(‘drag‘)); drag(document.getElementById(‘drag2‘)); drag(document.getElementById(‘drag3‘)); drag(document.getElementById(‘drag4‘)); }; function drag(o, r) { o.p_p_c_gw = function(index) /*取得o.parentNode.parentNode.cells的宽度，兼容IE6和Firefox*/ { if(window.ActiveXObject) { return o.parentNode.parentNode.cells[o.parentNode.cellIndex + index].offsetWidth; } else { return parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex + index].offsetWidth) - parseInt(o.parentNode.parentNode.parentNode.parentNode.cellPadding) * 2 - 2; } } o.p_p_p_sw = function(index, w) /*设置所有行的第index个单元格为w，在IE下可只设第一行*/ { for(var i = 0; i < o.parentNode.parentNode.parentNode.parentNode.rows.length; i++) { o.parentNode.parentNode.parentNode.parentNode.rows[i].cells[index].style.width = w; } } o.firstChild.onmousedown = function() { return false; }; o.onmousedown = function(a) { var d = document; if(!a) a = window.event; var lastX = a.clientX; var watch_dog = o.p_p_c_gw(0) + o.p_p_c_gw(1); //有时候拖拽过快表格会变大，至于为什么会这样我也不清楚。watch_dog是为了保证表格不会变大， if(o.setCapture) o.setCapture(); else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); // d.onmousemove = function(a) { if(!a) a = window.event; if(o.p_p_c_gw(0) + o.p_p_c_gw(1) > watch_dog) { o.p_p_p_sw(o.parentNode.cellIndex + 1, watch_dog - o.p_p_c_gw(0)); return; } var t = a.clientX - lastX; if(t > 0) { //right if(parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex + 1].style.width) - t < 10) return; o.p_p_p_sw(o.parentNode.cellIndex, o.p_p_c_gw(0) + t); o.p_p_p_sw(o.parentNode.cellIndex + 1, o.p_p_c_gw(1) - t); } else { //left if(parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex].style.width) + t < 10) return; o.p_p_p_sw(o.parentNode.cellIndex, o.p_p_c_gw(0) + t); o.p_p_p_sw(o.parentNode.cellIndex + 1, o.p_p_c_gw(1) - t); } lastX = a.clientX; }; d.onmouseup = function() { if(o.releaseCapture) o.releaseCapture(); else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); d.onmousemove = null; d.onmouseup = null; }; }; }
table拖动(兼容Firefox 3.5/IE6)，固定表格宽度
标签：size first net css 20px 拖拽 watch false eve
原文地址：http://www.cnblogs.com/wenxiangxu/p/6055776.html
