이거 맘대로 되는 세상이 아니구만...

행 추가 하는 스크립트, (row insert), innerHTML 스크립트 적용하기 본문

html/javascript

행 추가 하는 스크립트, (row insert), innerHTML 스크립트 적용하기

바이홍 2008. 11. 10. 14:35
반응형

그대루 가져다 써도 됩니다. ^^ .js랑 class, 이미지만 적용안될 뿐이겠죠


<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=euc-kr">
<TITLE>TEST</TITLE>
<LINK HREF="../common/css/admin_ghs.css" REL="stylesheet"/>
<script>
  
  var rowNum = 1;  //로우 줄 수 계산을 위해서
function addRow(form){
  var oCurrentRow;
  var insertTable = document.getElementById('insertTable')
 
 //몇번째 로우부터 행을 추가 할 것인가? 전 3번째 row부터 추가
  oCurrentRow = insertTable.insertRow(2+rowNum);
 
  oCurrentRow.onmouseover = function(){ insertTable.clickedRowIndex = this.rowIndex }

  var oCell1  = oCurrentRow.insertCell(); //1번째 td
  var oCell2  = oCurrentRow.insertCell(); //2번째 td
  var oCell3  = oCurrentRow.insertCell(); //3번째 td
  var oCell4  = oCurrentRow.insertCell(); //4번째 td
  var oCell5  = oCurrentRow.insertCell(); //5번째 td
  var oCell11 = oCurrentRow.insertCell(); //6번째 td
      
  var x = new Array(oCell2, oCell3, oCell4, oCell5); //스타일만을 적용한 td를 제외한 행에 input text박스 만들어 넣기
        oCell1.innerHTML  = "<SPAN class=\"search_bdr_top_admin\"><IMG src=\"../images/sub/spacer.gif\" width=\"5\" height=\"1\"></SPAN>";
  for(i=0 ; i < x.length ; i++){
   x[i].innerHTML  = "<input type=\"text\" size=\"10\">";
   //마지막 td는 삭제버튼을 넣기 위해서 if문으로 걸러야 함 input text뿐만 아니라 다른것도 넣을 수 있다
   if(x.length -1 == i){
    x[i].innerHTML = "<input type=\"button\" style=\"height:22\" value=\"삭제(-)\" onclick=\"deleteRow(form);\">";  //스타일을 넣었지만 적용 안됨
   }
  }
  oCell11.innerHTML = "&nbsp;";
  
  //insertCell style
  var s = new Array(oCell1, oCell11);
  for(i=0 ; i < x.length ; i++){
   x[i].style.backgroundColor= "#ffffff"; //스타일 적용하기
   x[i].align= "center";
   x[i].height = "27";
   if(i != x.length -1){
    x[i].className = "underline_td1"; //class 적용하기
   }else{
    x[i].className = "underline_td1"
   }
  }
  for(j=0 ; j < s.length ; j++){
   s[j].width = "5";
   s[j].valign = "top";
   s[j].style.backgroundColor= "#e4eeed";
  }
  s[0].align = "LEFT";
  s[0].background = "../images/sub/ly_searchbox_l.gif"
  s[1].align = "RIGHT";
  s[1].className = "underline_td3";
  s[1].background= "../images/sub/ly_searchbox_r.gif";

  rowNum++;  //추가한 행 넘버 +
}

//Row 삭제
function deleteRow(form){
      insertTable.deleteRow(insertTable.clickedRowIndex);

    rowNum-- //삭제한 행 넘버 -
    }
</script>
</HEAD>
<BODY>
<form name="form">
<TABLE width="860" height="750" cellpadding="0" cellspacing="0">
<input type="hidden" name="rowNum" value="1" >
<TR>
 <TD valign="TOP" colspan="2">
  <TABLE width="830" height="" cellpadding="0" cellspacing="0" style="MARGIN:10 15 25 15PX;">
  <TR>
  <Th align="center">매출처 관리</Th>
  </TR>
  <TR>
  <TD><IMG src="/images/popup/ico_title.gif" width="11" height="11" align="ABSMIDDLE">&nbsp;<span class="pop_table_title">기본정보관리</span></TD>
  </TR>
  <TR><TD height="16"></TD></TR>
  <TR>
   <TD>
  <!-- =========================== STRAT ============================ -->
   <table width="830" cellpadding="0" cellspacing="0" border="0">
    <tr height="5"><td></td><td></td></tr>
    <tr valign="top"><td><span class="pop_table_title">기념일 관리</span></td>
     <td align="right"><input type="button" style="height:22" value="추가(+)" onclick="addRow(1);"></td>
    </tr>
   </table>
   <TABLE width="830" cellpadding="0" cellspacing="0" border="0" bgcolor="#e4eeed" id = "insertTable">
    <TR>
     <TD width="5" height="5" align="LEFT" valign="TOP"><IMG src="../images/popup/pop_box_top_l.gif" width="5" height="5"></TD>
     <TD width="80" height="5" valign="TOP" background="../images/sub/ly_searchbox_top.gif" bgcolor="#e4eeed" colspan="4"><IMG src="../images/pop/spacer.gif" width="1" height="4"><IMG src="/images/pop/spacer.gif" width="1" height="5"></TD>
     <TD width="5" height="5" align="RIGHT" valign="TOP"><IMG src="../images/popup/pop_box_top_r.gif" width="5" height="5"></TD>
    </TR>

    <TR onMouseOver="insertTable.clickedRowIndex=this.rowIndex">
     <TD width="5" align="LEFT" valign="TOP" background="../images/sub/ly_searchbox_l.gif" bgcolor="#e4eeed"><SPAN class="search_bdr_top_admin"><IMG src="../images/sub/spacer.gif" width="5" height="1"></SPAN></TD>
     <TD bgcolor="#e4eeed" height="27" align="center" class="underline_td1">상품명</TD>
     <TD bgcolor="#e4eeed" height="27" align="center" class="underline_td1">매입처</TD>
     <TD bgcolor="#e4eeed" height="27" align="center" class="underline_td1">특이사항</TD>
     <TD bgcolor="#e4eeed" height="27" align="center" class="underline_td1">삭제</TD>
     <TD width="5" align="RIGHT" valign="TOP" class="underline_td2" background="../images/sub/ly_searchbox_r.gif" bgcolor="#e4eeed">&nbsp;</TD>
    </tr>
    <TR>
     <TD width="5" align="LEFT" valign="TOP" background="../images/sub/ly_searchbox_l.gif" bgcolor="#e4eeed"><SPAN class="search_bdr_top_admin"><IMG src="../images/sub/spacer.gif" width="5" height="1"></SPAN></TD>
     <TD bgcolor="#ffffff" height="27" align="center" class="underline_td1"><input type="text" size="10"></TD>
     <TD bgcolor="#ffffff" height="27" align="center" class="underline_td1"><input type="text" size="10"></TD>
     <TD bgcolor="#ffffff" height="27" align="center" class="underline_td1"><input type="text" size="10"></TD>
     <TD bgcolor="#ffffff" height="27" align="center" class="underline_td1"></TD>
     <TD width="5" align="RIGHT" valign="TOP" class="underline_td3" background="../images/sub/ly_searchbox_r.gif" bgcolor="#e4eeed">&nbsp;</TD>
     </tr>
     <TR>
     <TD width="5" height="5" valign="BOTTOM"><IMG src="../images/popup/pop_box_bot_l.gif" width="5" height="5"></TD>
     <TD height="5" valign="TOP" background="../images/sub/ly_searchbox_bot.gif" bgcolor="#e4eeed" colspan="4"><SPAN class="search_bdr_top_admin"><IMG src="../images/pop/spacer.gif" width="1" height="5"></SPAN></TD>
     <TD bgcolor="#ffffff" width="5" height="5" valign="BOTTOM"><IMG src="../images/popup/pop_box_bot_r.gif" width="5" height="5"></TD>
    </TR>
   </TABLE>
  <!-- =========================== END ============================ -->
  </TD>
  </TR>
  </TABLE>
 </TD>
</TR>
</TABLE>
</form>
</BODY>
</HTML>












반응형
'html/javascript' Related Articles more
Comments