我有这个html表:
<table>
<tr>
<td id="c0">bla</td>
<td class="Resizor" id="c01" onmousedown="setPosition(event);" onmouseover="setResizeColumns('c01', 'c0', 'c1');"> </td>
<td id="c1">bla</td>
<td class="Resizor" id="c12" onmousedown="setPosition(event);" onmouseover="setResizeColumns('c12', 'c1', 'c2');"> </td>
<td id="c2" >bla</td>
</tr>
<tr>
<td>blu</td>
<td></td>
<td>blu</td>
<td></td>
<td>blu</td>
</tr>
<tr>
<td>blu</td>
<td></td>
<td>blu</td>
<td></td>
<td>blu</td>
</tr>
</table>
这是我的js脚本:
var MinSize=0;
var _startPosition = 0;
var _diffPosition = 0;
var _allowMove = false;
var _resizerColumn = null;
var _firstColumn = null;
var _secondColumn = null;
var _resizerColumnLeft = 0;
var _resizerColumnWidth = 0;
var _firstColumnLeft = 0;
var _firstColumnWidth = 0;
var _secondColumnLeft = 0;
var _secondColumnWidth = 0;
var _systemEvent = null;
if (navigator.appName == 'Netscape') {
document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP | Event.ONLOAD);
}
document.onmouseup = disableMouseMovement;
document.onmousemove = setNewPosition;
function setPosition(e) {
// Called for OnMouseDown event
if (navigator.appName == 'Netscape') {
_systemEvent = e;
} else {
_systemEvent = event;
}
_startPosition = _systemEvent.clientX;
_allowMove = true;
_resizerColumnLeft = findPosX(_resizerColumn);
_resizerColumnWidth = _resizerColumn.offsetWidth; //_resizerColumn.style.width;
_firstColumnLeft = findPosX(_firstColumn);
_firstColumnWidth = _firstColumn.offsetWidth; //_firstColumn.style.width;
_secondColumnLeft = findPosX(_secondColumn);
_secondColumnWidth = _secondColumn.offsetWidth; //_secondColumn.style.width;
return true;
}
function setResizeColumns(resizerColumn, firstColumn, secondColumn) {
// Called for OnMouseOver event
// resizerColumn is the actual object of the column that will be moved so that
// firstColumn and secondColumn can be resized.
// firstColumn will have its dimensions either grown or shrunk.
// secondColumn will have the exact opposite done to it that firstColumn has.
// If firstColumn is shrink by 60px, secondColumn is grown by 60px, the opposite also holds true.
resizerColumn=document.getElementById(resizerColumn);
firstColumn=document.getElementById(firstColumn);
secondColumn=document.getElementById(secondColumn);
if (_allowMove == false) {
_resizerColumn = resizerColumn;
_firstColumn = firstColumn;
_secondColumn = secondColumn;
}
return true;
}
function disableMouseMovement(e) {
// Called for OnMouseUp event
_allowMove = false;
return false;
}
function setNewPosition(e) {
// Called for OnMouseMove event
// BEGIN_HACK so that setPosition() can work.
if (navigator.appName == 'Netscape') {
_systemEvent = e;
} else {
_systemEvent = event;
}
// END_HACK
newPosition = _systemEvent.clientX;
if (_allowMove) {
_diffPosition = _startPosition - newPosition;
var tpos1 = (parseInt(_firstColumnWidth) - parseInt(_diffPosition)) ;
var tpos2 = (parseInt(_secondColumnWidth) + parseInt(_diffPosition)) ;
if (tpos1<MinSize) return;
if ((tpos2<MinSize) && (_firstColumnWidth>tpos1)) return;
if (tpos2<0) tpos2=0;
if (tpos1<0) tpos1=0;
_firstColumn.style.width = tpos1+ "px";
_secondColumn.style.width = tpos2+ "px";
}
return true;
}
function findPosX(obj) {
var curleft = 0;
if (obj.offsetParent){
while (obj.offsetParent){
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj){
var curtop = 0;
if (obj.offsetParent){
while (obj.offsetParent){
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
我想调整<Td>
超过表格宽度的100%,并且没有通过添加不会固定到100%屏幕的horizental滚动来停止调整大小
我的代码的问题是它将宽度修复为100%(参见演示)。有解决方案吗?
答案 0 :(得分:3)
需要进行三项更改。
第一次更改 - 传递一个参数,确定选择了哪个col (仅为清晰起见删除其他信息)
<td onmousedown="setPosition(event,1);" />
<td onmousedown="setPosition(event,2);" />
第二次更改 - 保存已选择的颜色
function setNewPosition(e,col) {
colSelected = col;
...
}
第3次更改 - 根据选择的col更改宽度
if(colSelected == 1)
_firstColumn.style.width = tpos1+ "px";
else if(colSelected == 2)
_secondColumn.style.width = tpos2+ "px";
<强>更新强> 试试这个 - _firstColumn.style.width = tpos1 +“px”; //_secondColumn.style.width = tpos2 +“px”;
虽然我建议你查看这些问题 - Resizable table columns with bz code
还有以下jsFiddle http://jsfiddle.net/tpqn7/