table column resize
페이지 정보
작성자 서방님 댓글 0건 조회 130회 작성일 07-04-25 14:50본문
<html>
<head>
<title>New Document </title>
<meta content="text/html; charset=euc-kr" http-equiv="Content-type">
<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 bgcolor="#B8B8B8" border="0" cellpadding="3" cellspacing="1" nowrap="NOWRAP" style="table-layout:fixed" width="430">
<tr align="center" bgcolor="#A5D4D2" height="25">
<td class="colresize" width="35">선택</td>
<td class="colresize" width="35">순번</td>
<td class="colresize" width="70">품목명</td>
<td class="colresize" width="30">수량</td>
<td class="colresize" width="50">단위</td>
<td class="colresize" width="70">날짜</td>
<td class="colresize" width="70">장소</td>
<td class="colresize" width="70">비고</td>
</tr>
<tr align="center" bgcolor="#FFFFFF" height="27">
<td><input name="radio" type="radio"></td>
<td>1</td>
<td><input class="input_box" type="text"></td>
<td><input class="input_box" type="text"></td>
<td>
<select class="input_box">
<option>EA</option>
</select>
</td>
<td><input class="input_box" type="text"></td>
<td><input class="input_box" type="text"></td>
<td class="ellipsis" nowrap="NOWRAP">비고 비고 비고 비고 비고 비고 비고 비고 비고</td>
</tr>
</table>
</div>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.
