1. 程式人生 > >【JavaScript】動態新增控制元件

【JavaScript】動態新增控制元件

    <script type="text/javascript">
        //<!--動態新增檔案瀏覽框函式-->
        function insertElement() 
            {
                //找到放置動態生成的檔案框的表格 
                var otablefile = document.getElementById("txttable");
                //新增一個新行
                var otr = otablefile.insertRow(0);
                //在新行中新增一個單元格,單元格中包含一個檔案瀏覽框和一個刪除按鈕
                otr.insertCell(0).innerHTML = "單項名字";
                otr.insertCell(1).innerHTML = "<input type=text name=usertxt[] style='width:150px'>";
                otr.insertCell(2).innerHTML = "<input type=button value='刪除' onclick='javascript:deltr(this);'>";
            }
        //<!--刪除動態增加的檔案框-->  
        function deltr(obj)
        {
                //刪除當前所在的行
                obj.parentElement.parentElement.removeNode(true);
        }
    </script>




<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <table id="txttable" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        單項名字
                    </td>
                    <td>
                        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                    </td>
                </tr>
            </table>
        </td>                                        
    </tr>
    <tr>
        <td align="right">
            <input id="Button1" onclick="insertElement();" type="button" value="button" />
        </td>
    </tr>
</table>


Request.Form["usertxt[]"]