티스토리 뷰

Web Development/JavaScript

javascript로 table row 추가하기

dev ms 2016. 3. 29. 22:46
반응형
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 
 
 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
 var rowIndex=3;
 
  function createRow(){
     var objTable = document.getElementById('table1');
     var objRow = objTable.insertRow(rowIndex);
     var cell = objRow.insertCell(0);
  var cel2 = objRow.insertCell(1);
     cell.innerHTML = '첨부파일';
  cel2.innerHTML = '<input type=file name=fileName'+parseInt(objTable.rows.length-4)+' size=40 />'
  //alert(objTable.rows.length-4)
  rowIndex++;
  }
</script>
</head>
<body>
<form name="updateFrm" method="post" action="/test/updateProc.do"enctype="multipart/form-data"  onsubmit="return f_validationChk(document.updateFrm);">
  <table id="table1" border="1">
   <input type="hidden" name="seq" value="" />
   
   <tr>
    <td>제목</td>
    <td><input type="text" name="title" id="title"  onkeyup="fc_chk_byte(this,300);"  value="" /></td>
   </tr>
   
   <tr>
    <td>내용</td>
    <td><textarea cols="80" rows="10"  style="width: 605px; height: 69px;" name="contents" id="contents"></textarea></td>
   </tr>
   <tr>
    <td>첨부파일</td>   
    <td> <input type="file" name="fileName" size="40" /> <input type="button" value="행생성" onclick="createRow()" /> </td>
   </tr>
   <tr>
    <td>등록일</td>   
    <td><c:out value="${item.strRegDtm}" /></td>
   </tr>
  </table>
</body>
</html>
 
 
 
----------------------------------- 2013.03.12 추가 ---------------------------------------
 
function rowInsert(){
 var table = document.getElementById("tbl");
 
 var idx = table.rows.length;
    var objRow = table.insertRow(idx-1);
 
 for(var i=0; i<8; i++){
 
  if(i==6){
   objRow.insertCell(i).innerHTML=100*i;
  }else{
   objRow.insertCell(i);
  }
  
 }
}
function totalSum(){
 
 var table = document.getElementById("tbl");
 var idx = table.rows.length;
 var sum =0;
 for(var i=1; i<idx-1; i++){
 
  sum= sum + parseInt(table.rows[i].childNodes[6].innerHTML);
 
 }
 console.log(idx);
 
 var Cell = table.rows[idx-1].childNodes[13];
 
 Cell.innerHTML=sum;
}
 
 
<table border="1" id="tbl">
<tr> 
<td>내용</td> 
<td>수량</td> 
<td>단가</td> 
<td>공임비</td> 
<td>공급가</td> 
<td>부가세</td> 
<td>합계</td> 
<td>삭제</td> 
</tr>
<tr> 
<td>총 합계 원</td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
</tr>
</table>


반응형
저작자표시

'Web Development > JavaScript' 카테고리의 다른 글

javascript 모바일 브라우저 체크  (0) 2016.03.29
javascript facebook news feed 연동  (0) 2016.03.29
구글 지도 (gogle map ) API 연동 2  (0) 2016.03.29
구글 지도 (google map ) API 연동  (0) 2016.03.29
javascript ajax 예제  (0) 2016.03.29