resize html table TDs with javascript -
i have html table:
<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> and js script:
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 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 onmouseover event // resizercolumn actual object of column moved // firstcolumn , secondcolumn can resized. // firstcolumn have dimensions either grown or shrunk. // secondcolumn have exact opposite done firstcolumn has. // if firstcolumn shrink 60px, secondcolumn grown 60px, opposite 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 onmouseup event _allowmove = false; return false; } function setnewposition(e) { // called onmousemove event // begin_hack 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; } i want resize <td> on 100% of table's width , didnt stop resizing adding horizental scroll not fixed 100% of screen problem code fix width 100% (see demo). there solution ?
three changes required.
1st change - pass parameter determining col has been selected (removing other information clarity)
<td onmousedown="setposition(event,1);" /> <td onmousedown="setposition(event,2);" /> 2nd change - save col has been selected
function setnewposition(e,col) { colselected = col; ... } 3rd change - change width based on col has been selected
if(colselected == 1) _firstcolumn.style.width = tpos1+ "px"; else if(colselected == 2) _secondcolumn.style.width = tpos2+ "px"; update: try instead - _firstcolumn.style.width = tpos1+ "px"; //_secondcolumn.style.width = tpos2+ "px";
though recommend check out these questions - resizable table columns bz code
also following jsfiddle http://jsfiddle.net/tpqn7/
Comments
Post a Comment