<br>그나저나 제가 연구한 칼럼을 숨기고 표시하는 방식도 구현해봤습니다. 하지만 이 함수는 CSS border-collapse:collapse;와 충돌합니다. 자세한 내용은 코드 2 <br><div class="htmlarea"> <textarea id="runcode2068">를 참조하세요. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Jgrid 드래그로 표 너비 변경</title> <style type="text/css"> <!-- * { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #333333; } --> </style> <div> <table id="dataTable" border="1" cellpadding="0" cellspacing="0" style="table-layout:fixed;"> <colgroup> <col style="width:200px;"> <col style="width:100px;"> <col style="width:100px;"> <col style="width:100px;"> <col style="width:100px;"> </colgroup> <tr> <td>拖动我1</td> <td>拖动我2</td> <td>拖动我3</td> <td>拖动我4</td> <td>拖动我5</td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </div> </textarea> <br><input onclick="runEx('runcode2068')" type="button" value="运行代码"><input onclick="doCopy('runcode2068')" type="button" value="复制代码"> <input onclick="doSave(runcode2068)" type="button" value="保存代码"> <a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank">[Ctrl A 모두 선택 참고: </a>외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. </div>]<br><br>수정됨 버전 2<div class="htmlarea"> <textarea id="runcode93782"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title>jgrid를 드래그하여 테이블 너비_수정 버전 변경<style type="text/css"> <!-- * { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #333333; } --> </style> <div> <table id="dataTable" border="1" cellpadding="0" cellspacing="0" style="table-layout:fixed;border-collapse:collapse;"> <colgroup> <col style="width:200px;"> <col style="width:100px;"> <col style="width:100px;"> <col style="width:100px;"> <col style="width:100px;"> </colgroup> <tr> <td>拖动我1</td> <td>拖动我2</td> <td>拖动我3</td> <td>拖动我4</td> <td>拖动我5</td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </div> </textarea> <br> <input onclick="runEx('runcode93782')" type="button" value="运行代码"><input onclick="doCopy('runcode93782')" type="button" value="复制代码"><input onclick="doSave(runcode93782)" type="button" value="保存代码"> <a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank"> </a>[Ctrl A 모두 선택 참고: </div>외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. <br>]<br><br> 드래그 다운 큰 그림자는 어떻게 생긴 걸까요? <br><script language="javascript" type="text/javascript"> var JPos = {}; (function($){ $.getAbsPos = function(pTarget){ var x_ = y_ = 0; if(pTarget.style.position != "absolute"){ while(pTarget.offsetParent){ x_ += pTarget.offsetLeft; y_ += pTarget.offsetTop; pTarget = pTarget.offsetParent; } } x_ += pTarget.offsetLeft; y_ += pTarget.offsetTop; return {x:x_,y:y_}; } $.getEventPos = function(evt){ var _x,_y; evt = JEvent.getEvent(evt); if(evt.pageX || evt.pageY){ _x = evt.pageX; _y = evt.pageY; }else if(evt.clientX || evt.clientY){ _x = evt.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft) - (document.body.clientLeft || document.documentElement.clientLeft); _y = evt.clientY + (document.body.scrollTop || document.documentElement.scrollTop) - (document.body.clientTop || document.documentElement.clientTop); }else{ return $.getAbsPos(evt.target); } return {x:_x,y:_y}; } })(JPos); //======================================================================================= var JEvent = {}; (function($){ $.getEvent = function(evt){ evt = window.event || evt; if(!evt){ var fun = JEvent.getEvent.caller; while(fun != null){ evt = fun.arguments[0]; if(evt && evt.constructor == Event) break; fun = fun.caller; } } return evt; } $.doEvent = function(fun){ var args = arguments; return function(){ return fun(args); } } })(JEvent); //======================================================================================= var colIndex; var dataTable = document.getElementById("dataTable"); var cols = dataTable.getElementsByTagName("COL"); var dragMask = document.createElement("DIV"); var mAWidth = mAHeight = 300; document.body.insertBefore(dragMask,document.body.lastChild); dragMask.style.cssText = "width:" + mAWidth + "px;height:" + mAHeight + "px;position:absolute;background-color:#000;filter: Alpha(Opacity=10);-moz-opacity:0.1;opacity: 0.1;display:none;z-index:999999999;display:none;"; var mask_mousemove = function(evt){ if(document.selection){//IE ,Opera if(document.selection.empty) document.selection.empty();//IE else{//Opera document.selection = null; } }else if(window.getSelection){//FF,Safari window.getSelection().removeAllRanges(); } var oPos = JPos.getAbsPos(this); var mPos = JPos.getEventPos(evt); var x = mPos.x - oPos.x - mAWidth / 2; var tmpX = parseInt(cols[colIndex].style.width) + x; dragMask.style.left = mPos.x - mAWidth / 2 + "px"; cols[colIndex].style.width = tmpX >= 2 ? tmpX + "px" : "2px"; if(!document.all) dataTable.parentNode.style.width = dataTable.parentNode.clientWidth + x + "px";//这一句为处理FF时用。 } var mask_mouseup = function(evt){ dragMask.style.display = "none"; } dragMask.onmousemove = mask_mousemove; dragMask.onmouseup = mask_mouseup; var cell_mousedown = function(evt){ colIndex = this.colIndex; var mPos = JPos.getEventPos(evt); with(dragMask.style){ left = mPos.x - mAWidth / 2 + "px"; top = mPos.y - mAHeight / 2 + "px"; display = ""; } } var chk_click = function(evt){ var obj = cols[this.colIndex]; if(this.checked){ obj.style.cssText = obj.css_ ? obj.css_ : "width:100px;"; }else{ obj.css_ = obj.style.cssText; obj.style.cssText = document.all ? "display:none" : "visibility: collapse;overflow:hidden;width:0px;"; } } var i , o; var label ,chk; for(i = 0 ; o = dataTable.rows[0].cells[i] ; i++){ o.colIndex = i; o.onmousedown = cell_mousedown; label = document.createElement("LABEL"); document.body.insertBefore(label,document.body.lastChild); chk = document.createElement("INPUT"); chk.type = "checkbox"; label.appendChild(chk); chk.onclick = chk_click; chk.colIndex = i; chk.checked = "checked"; label.appendChild(document.createTextNode(o.innerHTML)); } </script> 일부러 보여준 걸까요. <script language="javascript" type="text/javascript"> var JPos = {}; (function($){ $.getAbsPos = function(pTarget){ var x_ = y_ = 0; if(pTarget.style.position != "absolute"){ while(pTarget.offsetParent){ x_ += pTarget.offsetLeft; y_ += pTarget.offsetTop; pTarget = pTarget.offsetParent; } } x_ += pTarget.offsetLeft; y_ += pTarget.offsetTop; return {x:x_,y:y_}; } $.getEventPos = function(evt){ var _x,_y; evt = JEvent.getEvent(evt); if(evt.pageX || evt.pageY){ _x = evt.pageX; _y = evt.pageY; }else if(evt.clientX || evt.clientY){ _x = evt.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft) - (document.body.clientLeft || document.documentElement.clientLeft); _y = evt.clientY + (document.body.scrollTop || document.documentElement.scrollTop) - (document.body.clientTop || document.documentElement.clientTop); }else{ return $.getAbsPos(evt.target); } return {x:_x,y:_y}; } })(JPos); //======================================================================================= var JEvent = {}; (function($){ $.getEvent = function(evt){ evt = window.event || evt; if(!evt){ var fun = JEvent.getEvent.caller; while(fun != null){ evt = fun.arguments[0]; if(evt && evt.constructor == Event) break; fun = fun.caller; } } return evt; } $.doEvent = function(fun){ var args = arguments; return function(){ return fun(args); } } })(JEvent); //======================================================================================= var colIndex; var dataTable = document.getElementById("dataTable"); var cols = dataTable.getElementsByTagName("COL"); var dragMask = document.createElement("DIV"); var mAWidth = mAHeight = 300; document.body.insertBefore(dragMask,document.body.lastChild); dragMask.style.cssText = "width:" + mAWidth + "px;height:" + mAHeight + "px;position:absolute;background-color:#000;filter: Alpha(Opacity=10);-moz-opacity:0.1;opacity: 0.1;display:none;z-index:999999999;display:none;"; var mask_mousemove = function(evt){ if(document.selection){//IE ,Opera if(document.selection.empty) document.selection.empty();//IE else{//Opera document.selection = null; } }else if(window.getSelection){//FF,Safari window.getSelection().removeAllRanges(); } var oPos = JPos.getAbsPos(this); var mPos = JPos.getEventPos(evt); var x = mPos.x - oPos.x - mAWidth / 2; var tmpX = parseInt(cols[colIndex].style.width) + x; dragMask.style.left = mPos.x - mAWidth / 2 + "px"; cols[colIndex].style.width = tmpX >= 2 ? tmpX + "px" : "2px"; if(!document.all) dataTable.parentNode.style.width = dataTable.parentNode.clientWidth + x + "px";//这一句为处理FF时用。 } var mask_mouseup = function(evt){ dragMask.style.display = "none"; } dragMask.onmousemove = mask_mousemove; dragMask.onmouseup = mask_mouseup; var cell_mousedown = function(evt){ colIndex = this.colIndex; var mPos = JPos.getEventPos(evt); with(dragMask.style){ left = mPos.x - mAWidth / 2 + "px"; top = mPos.y - mAHeight / 2 + "px"; display = ""; } } var chk_click = function(evt){ var obj = cols[this.colIndex]; if(this.checked){ obj.style.cssText = obj.css_ ? obj.css_ : "width:100px;"; }else{ obj.css_ = obj.style.cssText; obj.style.cssText = document.all ? "display:none" : "visibility: collapse;overflow:hidden;width:0px;"; } } var i , o; var label ,chk; for(i = 0 ; o = dataTable.rows[0].cells[i] ; i++){ o.colIndex = i; o.onmousedown = cell_mousedown; label = document.createElement("LABEL"); document.body.insertBefore(label,document.body.lastChild); chk = document.createElement("INPUT"); chk.type = "checkbox"; label.appendChild(chk); chk.onclick = chk_click; chk.colIndex = i; chk.checked = "checked"; label.appendChild(document.createTextNode(o.innerHTML)); } </script>변경 -moz-opacity:0.1;불투명도: 0.1.