webform环境下，单击按钮添加一行数据

在C#，webform环境下，网页中有这么一项，如下图

img



<asp:DropDownList ID="DropDownList1" Width="100px" runat="server">
<asp:DropDownList ID="DropDownList2" Width="100px" runat="server">
<asp:TextBox ID="TextJuLi" runat="server">
<asp:Button ID="btnChangDu" runat="server" Text="添加" OnClick="btnChangDu_Click" />

其中两个下拉框控件dropdownlist各自分别加载一些节点数据如“N1，N2，N3”等
其中的文本框控件textbox 输入长度信息 比如“1124“，”2000”等
要求在下面设置一个数据显示控件，每点击一次添加按钮，就在数据显示控件上把这行数据加载到数据显示控件中，比如“N1，N2，1124”，其中的1124这一格还可以单击进行手动修改，比如改为“1200”
数据显示控件需要三列的表头为“节点“，“节点，“长度”
需要前端及后端代码！

页面布局代码发出来


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div class="list">
            <div class="item">
                <asp:DropDownList ID="drdlist1" runat="server">
                    <asp:ListItem Value="N1">N1</asp:ListItem>
                    <asp:ListItem Value="N2">N2</asp:ListItem>
                </asp:DropDownList>


                <asp:DropDownList ID="DropDownList2" runat="server">
                    <asp:ListItem Value="N1">N1</asp:ListItem>
                    <asp:ListItem Value="N2">N2</asp:ListItem>
                </asp:DropDownList>
                <asp:TextBox ID="txtLen" runat="server"></asp:TextBox>
                <input type="button" id="txtAdd" value="添加" />
            </div>
        </div>
        <asp:Button ID="btnSub" runat="server" Text="提交" OnClick="btnSub_Click" />
    </form>
</body>
</html>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $("#txtAdd").click(function () {
        $(this).parent().first().clone(true).appendTo('.list');
    });
</script>

img

后台获取

string txtLen = Request.Form["txtLen"];//11,22,33