본문 바로가기

카테고리 없음

javascript 테이블 생성하기

cloneNode로 table객체를 복사하고 insertAdjacentHTML로 테이블을 추가했습니다.

 

<html>
<head>
<script type="text/javascript">
  var idx;
  var obj_table;
  function my_init() {
    idx=0;
    obj_table=document.all.mytable.cloneNode(true);
  }
  function add_table() {
    if (idx<9) {  //제한
        idx++;
        eval("document.all.mytable"+(idx>1?idx-1:"")).insertAdjacentHTML("afterEnd",obj_table.outerHTML.replace("mytable","mytable"+idx));
    }
  }
  function del_table() {
    if (idx>0) {
        eval("document.all.mytable"+idx).removeNode(true);
        idx--;
    }
  }
</script>
</head>
<body onload=my_init()>
  <table border=0 cellspacing=1 bgColor=black id=mytable>
    <tr bgColor=white align=center>
      <td>1/1</td>
      <td>1/2</td>
      <td>1/3</td>
    </tr>
    <tr bgColor=white align=center>
      <td>2/1</td>
      <td>2/2</td>
      <td>2/3</td>
    </tr>
    <tr bgColor=white align=center>
      <td>3/1</td>
      <td>3/2</td>
      <td>3/3</td>
    </tr>
  </table>
  <Input type=button value=테이블추가 onclick=add_table()>
  <Input type=button value=테이블삭제 onclick=del_table()>
</body>
</html>