2009. 7. 3. 16:22

동적으로 테이블 행 추가/삭제 하기

2009. 7. 3. 16:22 in 3. Implementation/VB / Java Script
다음 내용에 대한 내용이 다루어 진다.

1. 동적으로 테이블에 행 추가하기
2. 동적으로 테이블에 행 삭제하기
3. 동적으로 엘리먼트에 이벤트 할당하기
4. 이벤트 핸들러에서 event.srcElement 를 통해서 원본 엘리먼트 가져오기등

* 업데이트 : 2009-07-08

 TR 과 TD 추가시 TBODY 를 사용하지 말고 TABLE 의 메소드를 호출하여 구현하는 것이 더 좋다. 그렇게 하면, 코드도 깔끔해지면서 TBODY 를 사용하면서 나타나는 여러가지 문제를 사전에 예방할 수 있다.
아래 소스는 appendChild 를 따로 호출할 필요가 없다.

function AppendTrAndTd()

{

    var newRow = tbl.insertRow();

    var newTD = newRow.insertCell();

}


아래 소스는 모두 insertRow 와 insertCell 로 변경해야 한다.




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title></title>

</head>

    <script type="text/javascript" language="javascript">

        function NewRow()

        {

            var tBody = tbl.getElementsByTagName("tbody")[0];

            var row = MakeNewRow();

            tBody.appendChild(row);

        }

        function InsertUpper()

        {

            InsertRow (event.srcElement, true);

        }

       

        function InsertLower()

        {

            InsertRow(event.srcElement, false);

        }

       

        function InsertRow(obj, ToUpper)

        {

            var TargetRow;

           

            TargetRow = obj.parentNode;

            while(TargetRow != null)

            {

                if( TargetRow.nodeName == "TR" )

                {

                    break;

                }

                TargetRow = TargetRow.parentNode;

                if(TargetRow == document)

                {

                    TargetRow = null;

                    break;

                }

            }

           

            if(TargetRow == null)

                return;

               

            var newRow = MakeNewRow();

           

            var tBody = tbl.getElementsByTagName("tbody")[0];

           

            if (ToUpper == true)

            {

                tBody.insertBefore(newRow, TargetRow);

            }

            else

            {

                TargetRow = TargetRow.nextSibling;

                if(TargetRow != null)

                {

                    tBody.insertBefore(newRow, TargetRow);

                }

                else

                {

                    tBody.appendChild(newRow);

                }

            }

        }

       

        function MakeNewRow()

        {

            // check box

            var newRow = document.createElement("tr");

            var newTd = document.createElement("td");

            var newInput = document.createElement("input");

            newInput.setAttribute("type", "checkbox")

            newTd.appendChild(newInput);

            newRow.appendChild(newTd);

           

            // Description

            newTd = document.createElement("td");

            var newTextArea = document.createElement("textarea");

            newTextArea.setAttribute("cols", "50");

            newTextArea.setAttribute("rows", "3");

            newTd.appendChild(newTextArea);

            newRow.appendChild(newTd);

           

            // Expected Result

            newTd = document.createElement("td");

            var newTextArea = document.createElement("textarea");

            newTextArea.setAttribute("cols", "50");

            newTextArea.setAttribute("rows", "3");

            newTd.appendChild(newTextArea);

            newRow.appendChild(newTd);

           

            // buttons

            newTd = document.createElement("td");

            newInput = document.createElement("input");

            newInput.setAttribute("type", "button");

            newInput.setAttribute("value", "△");

            newInput.attachEvent("onclick", InsertUpper);

            newTd.appendChild(newInput);

           

            var newBr = document.createElement("br");

            newTd.appendChild(newBr);

           

            newInput = document.createElement("input");

            newInput.setAttribute("type", "button")

            newInput.setAttribute("value", "▽")

            newInput.attachEvent("onclick", InsertLower);

            newTd.appendChild(newInput);

           

            newRow.appendChild(newTd);

           

            return newRow;         

        }

       

        function deleteCheckedRow()

        {

            var inputList = document.getElementsByTagName("input");

            var tBody = tbl.getElementsByTagName("tbody")[0];

            var checkItem;

            for(var i=inputList.length-1; i >= 0; i--)

            {

                checkItem = inputList.item(i);

                if( checkItem.checked == true)

                {

                    var nodeParent = checkItem.parentNode.parentNode;

                    if(nodeParent.nodeName == "TR")

                    {

                        tBody.removeChild(nodeParent);

                    }

                }

            }

        }

    </script>

<body>

    <!--<input type="button" value="Java : New Step" onclick="javascript:MakeNewRow()" /> <p></p>

    <input type="button" value="VBScript : New Step" onclick="vbscript:MakeNewRow()" /> <p></p>-->

    <input type="button" value="Delete checked items" onclick="javascript:deleteCheckedRow()" />

    <input type="button" value="New Row" onclick="javascript:NewRow()" />

    <p></p>

    <table id="tbl" border="1" >

        <tr>

            <th></th>

            <th>Description</th>

            <th>Expected Result</th>

            <th></th>

        </tr>

        <tr>

            <td><input type="checkbox" /></td>

            <td><textarea cols="50" rows="3"></textarea></td>

            <td><textarea cols="50" rows="3"></textarea></td>

            <td>

                <input type="button" value="△" onclick="javascript:InsertRow(this, true)" /><br />

                <input type="button" value="▽" onclick="javascript:InsertRow(this, false)" />

            </td>

        </tr>

    </table>

</body>

</html>



Posted by SSKK

티스토리툴바