table拖动(兼容Firefox 3.5/IE6)，固定表格宽度
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了table拖动(兼容Firefox 3.5/IE6)，固定表格宽度相关的知识，希望对你有一定的参考价值。
效果：可鼠标拖动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)，固定表格宽度的主要内容，如果未能解决你的问题，请参考以下文章
jQuery Safari / Chrome与可拖动的包含属性不兼容