[자바스크립트] 데이터가 입력되면 테이블의 필드를 추가.

1. HTML

 

제 목 : <input type="text" size="8" name="a1" id="a1" />
작성자 : <input type="text" size="8" name="a2" id="a2" /><br/>
일 자 : <input type="text" size="8" name="a3" id="a3" />
비 고&nbsp;&nbsp;&nbsp; : <input type="text" size="8" name="a4" id="a4" /><br/>
<p/>
<button onclick="Add();">등 록</button>
<br/>

<table border="1" width="585" id="insertTable" style="table-layout:fixed;">
  <!-- div id="setT" style="width=590 height:400px; :auto" -->
    <tr>
        <th width="200">제 목</th>
        <th width="80">작성자</th>
        <th width="100">일 자</th>
        <th width="200">비 고</th>
    </tr>
  <!-- /div -->   
</table>

 

 

 

2. SCRIPT

 

function Add() {
  var table1 = document.getElementById("insertTable");
 
  // tr 개체를 얻어와 속성값을 조절한다.
  var tr = document.createElement("tr");
  tr.setAttribute("bgColor", "white");
  tr.setAttribute("height", "30");
  
  var td1 = document.createElement("td");
  td1.setAttribute("width", "200");
  td1.innerText = document.all.a1.value;
   
  var td2 = document.createElement("td");
  td2.setAttribute("width", "80");
  td2.innerText = document.all.a2.value;
   
  var td3 = document.createElement("td");
  td3.setAttribute("width", "100");
  td3.innerText = document.all.a3.value;
   
  var td4 = document.createElement("td");
  td4.setAttribute("width", "200");
  td4.innerText = document.all.a4.value;

  tr.appendChild(td1);
  tr.appendChild(td2);
  tr.appendChild(td3);
  tr.appendChild(td4);
    
  // alert(td1.innerText);
  // alert(td2.innerText);
    
  // 초기에 보여주는' 내용이 없습니다' 행을 지운다.
  /*
  if (table1.firstChild.childNodes.length == 0){
    alert("1");
    table1.removeChild(table1.firstChild);
    alert("2");
  }
  */
  // 입력된값을 넣은 tr 개체를 추가한다.
  table1.appendChild(tr);
}

 

3. RUN

 

https://jsfiddle.net/p1yfth2f/2/