테이블 셀 가꾸놀기 결정판
작성일 07-08-07 16:54
페이지 정보
작성자서방님 조회 191회 댓글 0건본문
table,tr,td 의 innerHTML 속성으로 좀 가꾸놀기
어떤 데이터 셋을 만들때
만들어가는 과정에서 매번 insert+select 를 페이지 리로드 해가는 방식으로
구현하는 분들께는
조금 자극이 될듯해서..^^
DB저장 전에 table의 셀내용을 추가/수정/삭제/순서변경 등을 처리할수있는 스크립트입니다.
원랜 제가 매번 <script src="common.js></script> 식으로 정의해놓고 쓰는 함수들을 다 끄집어 냈더니 무지 길어졌군요.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<script>
var selectedIdx = -1;
var tblRowLimit = 10; //10개 행만 지원 합니다.
//테이블의 맨 마지막에 새 행을 추가합니다.
function insertNewRow(cellHtml)
{
var oCell = new Array();
if(cellHtml.length ==0){
return void(alertFocus("입력할 내용이 없습니다",document.frmData.cellHtml));
}
if(tblNews.rows.length >= tblRowLimit){
return void(alertFocus("10개 이상은 입력 하실수 없습니다.",document.frmData.cellHtml));
}
//새 행 추가
var gRows = tblNews.insertRow();
gRows.onmousedown = function(){selectRow(this)}
gRows.onmouseover = function(){tblMouseOver(this)}
gRows.onmouseout = function(){tblMouseOut(this)}
//새 셀(td)추가
oCell[0] = gRows.insertCell();
//각셀의 값 입력
oCell[0].innerHTML = cellHtml;
//추가된 셀 선택
selectRow(gRows) ;
}
//cell HTML 업데이트
function updateTblRow()
{
if(selectedIdx != -1){
if(document.frmData.cellHtml.value.length ==0){
alertFocus("수정할 내용이 없습니다",document.frmData.cellHtml);
}else{
tblNews.rows[selectedIdx].cells[0].innerHTML=document.frmData.cellHtml.value;
}
}
}
//위로!
function upRow()
{
if(selectedIdx == -1) alert('선택두 안하셨구마~');
else if(selectedIdx == 0) alert('이미 맨위구마~ ㅡㅡ;;');
else{
var thisCell = tblNews.rows[selectedIdx].cells[0];
var distCell = tblNews.rows[selectedIdx -1].cells[0];
var tmp = distCell.innerHTML;
distCell.innerHTML = thisCell.innerHTML;
thisCell.innerHTML = tmp;
selectRow(tblNews.rows[selectedIdx -1]);
}
}
//아래로!
function downRow()
{
if(selectedIdx == -1) alert('선택두 안하셨구마~');
else if(selectedIdx + 1 >= tblNews.rows.length) alert('이미 맨 아래 구마~ ㅡㅡ;;');
else{
var thisCell = tblNews.rows[selectedIdx].cells[0];
var distCell = tblNews.rows[selectedIdx +1].cells[0];
var tmp = distCell.innerHTML;
distCell.innerHTML = thisCell.innerHTML;
thisCell.innerHTML = tmp;
selectRow(tblNews.rows[selectedIdx +1]);
}
}
//삭제
function clearRow()
{
tblNews.deleteRow(selectedIdx);
selectedIdx = -1;
}
//해당 row( or cell) 클릭시 작동
function selectRow(tblRow)
{
var f = document.frmData;
if(selectedIdx != tblRow.rowIndex){ //선택
if(selectedIdx != -1 ){
tblNews.rows[selectedIdx].cells[0].style.backgroundColor="white";
}
f.cellHtml.value = tblRow.cells[0].innerHTML;
tblRow.cells[0].style.backgroundColor="#CCFFCC";
selectedIdx = tblRow.rowIndex;
tblEventInit();
}else{ //선택해제
selectedIdx = -1;
tblRow.cells[0].style.backgroundColor="white";
document.frmData.cellHtml.value="";
}
}
function tblMouseOver(tblRow){
if(tblRow.rowIndex != selectedIdx){
tblRow.cells[0].style.backgroundColor="silver";
}
}
function tblMouseOut(tblRow){
if(tblRow.rowIndex != selectedIdx){
tblRow.cells[0].style.backgroundColor="white";
}
}
function tblEventInit()
{
//셀 이벤트 초기화
var len = tblNews.rows.length;
for(var i = 0 ; i < len ; i++){
tblNews.rows[i].onmousedown = function(){selectRow(this)}
tblNews.rows[i].onmouseover = function(){tblMouseOver(this)}
tblNews.rows[i].onmouseout = function(){tblMouseOut(this)}
}
}
function init()
{
tblEventInit();//셀 이벤트 초기화
}
function printDate(t)
{
var txt = document.all[t.name + "Text"];
var time = t.value;
// alert(time);
if(time.length>0){
txt.innerHTML = time.substring(0,4) + "년";
}
if(time.length>4){
txt.innerHTML += " " + time.substring(4,6) + "월";
if( time.substring(0,4) > 2300 || time.substring(0,4) < 1800){
txt.innerHTML = "<font color=red>1800~2300년 사이로 넣어주세요.</font>";
return "";
}
}
if(time.length>6){
txt.innerHTML += " " + time.substring(6,8) + "일";
if( time.substring(4,6) > 12 || time.substring(0,4) < 1){
txt.innerHTML = "<font color=red>01~12월 사이로 입력해주세요.</font>";
return "";
}
}
if(time.length>8){
txt.innerHTML += " " + time.substring(8,10) + "시";
if( time.substring(6,8) > 31 ){
txt.innerHTML = "<font color=red>1~31일 사이로 입력해주세요</font>";
return "";
}
}
if(time.length>10){
txt.innerHTML += " " + time.substring(10,12) + "분";
if( time.substring(8,10) > 23){
txt.innerHTML = "<font color=red>0시~23시 사이로 입력해주세요</font>";
return "";
}
}
if( time.length ==12 && time.substring(10,12) > 59 ){
txt.innerHTML = "<font color=red>0분~59분 사이로 입력해주세요</font>";
return "";
}
return true;
}
function check(mode)
{
var newsText
var f = document.frmData;
if(tblNews.rows.length < 1) alert('작성된 뉴스가 없습니다');
else if(!f.title.value)void(alertFocus('제목을 입력해주세요. 각 뉴스 셋을 구분하는 이름으로 사용됩니다.',f.title));
else if(f.sdTime.value.length != 12)void(alertFocus('게시 시작 일시의 형식이 잘못되었습니다',f.sdTime));
else if(f.edTime.value.length != 12)void(alertFocus('게시 종료 일시의 형식이 잘못되었습니다',f.edTime));
else if(f.edTime.value < f.sdTime.value)void(alertFocus('게시 종료 일시는 시작일시보다 과거가 될수없습니다',f.edTime));
else{
for(var i = 0 ; i < tblRowLimit ; i ++){ //히든폼에 데이터 세팅
newsText = f["newsTxt" + (i + 1) ];
if(tblNews.rows[i]){
newsText.value = tblNews.rows[i].cells[0].innerHTML;
}else{
newsText.value = "";
}
}
f.mode.value=mode;
f.action = "Action.asp";
f.target = "frmAction";
f.submit();
}
}
//alert 후 focus 이동후 false return;
function alertFocus(alertMsg,focusForm)
{
alert(alertMsg);
focusForm.focus();
return false;
}
//키보드 입력시 숫자 이외의 키를 누를 경우 false 를 리턴한다.
function isNum(e){
//alert(event.keyCode);
if ((event.keyCode >= 45 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 8|| event.keyCode==13 || event.keyCode==9) return true;
else return false;
}
</script>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" onLoad=init()>
테이블 셀 innerHTML 컨트롤 예제
<form name=frmData onSubmit="return false" method="post">
<input type=hidden name="mode" value="">
<input type=hidden name="no" value="">
<input type=hidden name="newsTxt1" value="">
<input type=hidden name="newsTxt2" value="">
<input type=hidden name="newsTxt3" value="">
<input type=hidden name="newsTxt4" value="">
<input type=hidden name="newsTxt5" value="">
<input type=hidden name="newsTxt6" value="">
<input type=hidden name="newsTxt7" value="">
<input type=hidden name="newsTxt8" value="">
<input type=hidden name="newsTxt9" value="">
<input type=hidden name="newsTxt10" value="">
<table border="1" width="700" align="center" cellspacing="0" bordercolordark="white" bordercolorlight="black">
<tr>
<td width="196" valign="bottom">
<table border="0" cellspacing="0" cellpadding="0" width="180" align=center id="tblNews" style="border-width:1px; border-style:dotted;">
<tr>
<td ><img src="http://ulgom.net/image/logobysong.gif" ></td>
</tr>
</table>
<p></p>
<input type=button name=btnSave value="수정사항저장" onClick="check('edit')">
<input type=button name=btnSave value="새이름으로 저장" onClick="check('new')">
</td>
<td width="44" >
<input type="button" value="↑↑" onClick="upRow()"><br><br>
<input type="button" value="↓↓" onClick="downRow()"><br><br>
<input type="button" value="삭제" onClick="clearRow()">
</td>
<td width="438" >
제목 : <input type=text name=title value="" size="46">
<br>시작일시 : <input type=text name=sdTime maxlength=12 size=12 value="" onKeyDown="return isNum(event)" onKeyUp="return printDate(this)">
<font id="sdTimeText" ></font>
<br>종료일시 : <input type=text name=edTime maxlength=12 size=12 value="" onKeyDown="return isNum(event)" onKeyUp="return printDate(this)">
<font id="edTimeText"></font>
<br><font color=red>날짜는 분단위 까지 숫자로만 입력합니다
<br>(예 : 2005년 1월 1일 오후 2시 5분 : 200501011405</font>
<textarea name=cellHtml rows="7" cols="44"></textarea><br>
<input type=button value="수정" name=btnSave onClick="updateTblRow()" ><input type=button value="추가" name=btnNew onClick="insertNewRow(this.form.cellHtml.value)">
</td>
</tr>
</form>
</table>
<center>
<!--- newsList 용 iframe --->
<iframe name=frmNewsList width=680 height=300 frameborder=0></iframe>
<!--- newsList 용 iframe --->
</center>
</body>
<!----DB 컨넥션용 Target Iframe--->
<iframe name="frmAction" width=0 height=0></iframe>
<!----DB 컨넥션용 Target Iframe--->
</html>
출처 : http://ulgom.net/gomsboard/view.html?t_nm=java_tip&idx=175
댓글목록
등록된 댓글이 없습니다.