如何使用Java脚本克隆ASP.NET控件

Question

我只想问问是否有可能使用Javascript克隆一个asp控件，因为我发现很难添加另一行，与之前的行相同。

这是Javascript：

<script type="text/javascript">
    function deleteRow(row) {
        var i = row.parentNode.parentNode.rowIndex;
        document.getElementById('POITable').deleteRow(i);
    }
    function myFunction()
        {
        var table = document.getElementById("POITable");
        var row = table.insertRow(2);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);
        var cell6 = row.insertCell(5);
        cell1.innerHTML = row.cells[1].getElementsByTagName('#asp:DropDownList')[0];
        cell2.innerHTML = row.cells[2].getElementsByTagName('#asp:DropDownList')[0];
        cell3.innerHTML = row.cells[3].getElementsByTagName('#asp:TextBox')[0];
        cell4.innerHTML = row.cells[4].getElementsByTagName('#asp:TextBox')[0];
        cell5.innerHTML = row.cells[5].getElementsByTagName('#asp:TextBox')[0];
        cell6.innerHTML = row.cells[6].getElementsByTagName('#asp:Label')[0];
        }
        </script>

这是我要克隆行的表：

<div id="POItablediv">
           <table class="table" id="POITable">
           <tr class="th">
               <td>Fabric</td>
               <td>Color</td>
               <td>Good For How Many</td>
               <td>Consumption</td>
               <td>Allowance</td>
               <td>MRP Quantity</td>
           </tr>
           <tr>
                <td> <asp:DropDownList ID="ddlFab" runat="server" DataSourceID="DSFabric" 
                                DataTextField="Description" DataValueField="Description" Width="120px">
                                </asp:DropDownList></td>
                <td><asp:DropDownList ID="ddlColor" runat="server" DataSourceID="ddlColors" 
                                DataTextField="Description" DataValueField="Description" Width="120px">
                                </asp:DropDownList></td>
                <td><asp:TextBox ID="txtGdForHwMany" runat="server" Width="120px" 
                        ontextchanged="txtGdForHwMany_TextChanged" ></asp:TextBox></td>
                <td><asp:TextBox ID="txtConsump" runat="server" Width="120px" 
                        ontextchanged="txtConsump_TextChanged"></asp:TextBox></td>
                <td><asp:TextBox ID="txtAllow" runat="server" Width="120px" 
                        ontextchanged="txtAllow_TextChanged"></asp:TextBox></td>
                <td><asp:Label ID="lblMRPQuantity" runat="server" Text="0" Width="120px"></asp:Label></td>
                    <td><input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)"/></td>
                    <td><input type="button" id="addmorePOIbutton" value="Add More POIs" onclick="myFunction()"/></td>
           </tr>
           </table>
       </div>

DropDownList是数据绑定的。

Answer 1

1. 客户端上的DropDown将转换为“ <select />”，因此getElementByTagName将不适用于asp：DropDownList。 您将必须使用类似getElementByTagName（“ select”）的方法，或者如果您使用的是jQuery，则可以给一个类名下拉菜单，并使用该类名的选择器，例如$（“。className”）来获得下拉列表。 。

2. <asp：TextBox />标记的类似名称将是<input />或为其使用类名

3. 对于<asp：Label />，标记将为<span />或为其使用类名

希望这可以帮助！

Answer 2

这不会像您期望的那样工作，因为一开始asp.net会将控件呈现为HTML。 即asp:dropdownlist变成<select>...</select> ，当asp:textbox呈现到页面时为<input type="text/>等。

此外，如果您成功克隆了该行，则表单元素的name和id属性将重复。

另一个问题是新元素不会像普通的asp.net元素那样暴露在页面后面的代码中。 可以使用Request对象访问，但是您仍然遇到名称属性重复的问题。