문서객체

공돌공돌 2012. 9. 11. 11:30

예제확인 - http://bboong100.cafe24.com/0911/test01.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script type="text/javascript">
function teTable()
{
    // var test = $('test');
    var testtable = document.getElementById("test");
    // table 개체 가져와서 testtable에 저장
    var tr = document.createElement("tr");
    // tr 개체 가져와서 testtr에 저장
    tr.setAttribute("height", "30");
    if (document.all.subject.value == "" || document.all.content.value == "") {
        alert('문자 입력하시오');
        return;
    }

var td1 = document.createElement("td");
td1.setAttribute("width", "100");

var td2 = document.createElement("td");
td2.setAttribute("width", "200");

tr.appendChild(td1);
tr.appendChild(td2);

td2.innerText = document.all.content.value;
td1.innerText = document.all.subject.value;

if (testtable.firstChild.lastChild.childNodes.length == 1)
testtable.firstChild.removeChild(testtable.firstChild.lastChild);

testtable.firstChild.appendChild(tr);

document.all.subject.value = '';
document.all.content.value = '';
}
</script>

</HEAD>

<BODY>
<table id="test" border="2">
        <tr>
            <th width="100">subject</th>
            <th width="100">content</th>
        </tr>
    </table>
    1 : <input type="text" size="10" name="subject"> 2 : <input type="text" size="10" name="content">
        <input type="button" value="추가" onclick="teTable()">

</BODY>
</HTML>