웹프로그램 하다가 업종 전환 한지 1년정도 되가는데 작업 하다가 필요한게 있어서 한번 만들어 봤습니다.
사용법은 제목부분의 칸 사이에 마우스를 가까이 하면 커서 모양이 바뀝니다. 그때 드래그를 하면 마우스가 이동한
거리만큼 셀의 크기가 바뀝니다.
제목 부분의 클레스 이름은 반드시 적어 주셔야 합니다. 셀의 사이즈가 변함에 따라 input 박스도 달라집니다...
그러나 사이즈가 변하는 input 박스를 남발 하면 반응 속도가
느려집니다. 또한 input 박스의 사이즈는 td의 cellpadding 보다 작아야 합니다.
주석을 달아 놨으니 이해하시는데는 별 어려움이 없을거라 생각 됩니다.
테이블을 <div> 테그 안에 넣지 않으시려면 테이블 자체의 사이즈는 지정해 주시면 안됩니다. (td)만 지정하세요
말줄임표 효과는 전에 스쿨에서 본걸로 구현해 보았습니다.
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=euc-kr">
<style>
.ellipsis {font:9pt "굴림"; width:100%; overflow:hidden; text-overflow:ellipsis; text-align:left; }
.colresize {font:9pt "굴림"; cursor:""; }
.input_box {width:expression(this.parentNode.clientWidth-8); }
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
var mousedown = false; //마우스를 누른 상태
var td = ""; //사이즈 변경할 td
var td_width; //변경할 td의 width,
var x = 0; //마우스 드레그전 가로위치
function TCstartColResize(obj){
mousedown = true;
td = obj;
td_width = td.width;
x = event.clientX;
}
function TCColResize()
{
if (mousedown){
var distX = event.x - x; //이동한 간격
td.width = parseInt(td_width) + parseInt(distX);
}
}
function TCstopColResize(){
mousedown = false;
td = '';
}
function cell_left(obj){//마우스가 셀의 왼쪽인지 측정
if(event.offsetX < 5 && obj.cellIndex!=0)
return true;
else
return false;
}
function cell_right(obj){//마우스가 셀의 오른쪽인지 측정
if(event.offsetX > obj.width-4)
return true;
else
return false;
}
//리사이즈시작
document.onmousedown = function(){
try{
var now_mousedown = window.event.srcElement;
if(now_mousedown.className.toUpperCase()=="COLRESIZE"){
if( cell_left(now_mousedown) ){
now_mousedown = now_mousedown.parentNode.childNodes[now_mousedown.cellIndex-1];
}else if( !cell_right(now_mousedown) ){
return true;//오른쪽도 왼쪽도 아니면 사이즈 조절 안함
}
TCstartColResize(now_mousedown);
}
}catch(e){ return true; }
}
//리사이즈
document.onmousemove = function(){
try{
var now_mousemove = window.event.srcElement;
if(now_mousemove.className.toUpperCase()=="COLRESIZE" || td!=""){
//셀의 가장자리면 마우스 커서 변경
if( cell_left(now_mousemove) || cell_right(now_mousemove) ){
now_mousemove.style.cursor = "col-resize";
}else{
now_mousemove.style.cursor = "";
}
TCColResize(now_mousemove);
}else{
now_mousemove.style.cursor = "";
}
}catch(e){ return true; }
}
//리사이즈종료
document.onmouseup = function(){
try{
var now_mouseup = window.event.srcElement;
//if(now_mouseup.className=="colResize"){
TCstopColResize(now_mouseup);
//}
}catch(e){ return true; }
}
//리사이즈 도중 텍스트 선택 금지
document.onselectstart = function(){
try{
if(td != ""){
return false;
}
}catch(e){ return true; }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<div style="width:100%;height:100;overflow-x:auto;overflow-y:auto">
<table width="430" border="0" cellpadding="3" cellspacing="1" bgcolor="#B8B8B8" nowrap style='table-layout:fixed'>
<tr bgcolor="#A5D4D2" align="center" height="25">
<td width="35" class="colresize">선택</td>
<td width="35" class="colresize">순번</td>
<td width="70" class="colresize">품목명</td>
<td width="30" class="colresize">수량</td>
<td width="50" class="colresize">단위</td>
<td width="70" class="colresize">날짜</td>
<td width="70" class="colresize">장소</td>
<td width="70" class="colresize">비고</td>
</tr>
<tr bgcolor="#FFFFFF" height="27" align="center">
<td><Input type="radio" name="radio"></td>
<td>1</td>
<td><input type='text' class="input_box"></td>
<td><input type='text' class="input_box"></td>
<td><select class="input_box"><option>EA</option></select></td>
<td><input type='text' class="input_box"></td>
<td><input type='text' class="input_box"></td>
<td nowrap class="ellipsis">비고 비고 비고 비고 비고 비고 비고 비고 비고</td>
</tr>
</table>
</div>
</BODY>
</HTML>