asp.net jquery用文本框添加行(克隆行)并动态下拉
当用户单击添加框属性时,该行(即需要添加2下拉列和文本框的行)上面的行需要使用
jquery动态创建(这样就没有回发帖).用户可以根据需要添加任意数量的数据,并在单击复选框时需要删除该行.如何通过jquery实现这一点.
<asp:Panel ID="pnl_BoxAttr" runat="server"> <table> <tr> <th> Name </th> <th> Comparision </th> <th> Value </th> <th> Delete </th> </tr> <tr> <td> <asp:DropDownList ID="ddl_BoxName" runat="server"> <asp:ListItem Value="attr1" Selected="True"></asp:ListItem> <asp:ListItem Value="attr2"></asp:ListItem> <asp:ListItem Value="attr3"></asp:ListItem> </asp:DropDownList> </td> <td> <asp:DropDownList ID="ddl_BoxComparision" runat="server"> <asp:ListItem Value="=" Selected="true"></asp:ListItem> <asp:ListItem Value=">"></asp:ListItem> <asp:ListItem Value="<"></asp:ListItem> <asp:ListItem Value="Like"></asp:ListItem> <asp:ListItem Value="!="></asp:ListItem> </asp:DropDownList> </td> <td> <asp:TextBox ID="btn_boxval" runat="server" ></asp:TextBox> </td> <td> <asp:CheckBox ID="chk_DeleteBoxRow" runat="server" /> </td> </tr> <tr> <td colspan="3"> <asp:Button ID="btn_AddAttr" Text="Add Box Attribute" runat="server"/> </td> </tr> </table> </asp:Panel> 解决方法
首先,这是一个工作演示,您可以在我的答案中参考:
http://jsfiddle.net/EuyB8/.
显然,演示是纯HTML而不是ASP.NET,但我会尝试解决这些差异. 首先,由于您将要创建一些使用.NET控件克隆的控件,我的典型方法是创建一个隐藏模板,然后可以使用该模板创建新副本.因此,我会有如下行: <tr id="TemplateRow"> <td> <asp:DropDownList ID="ddl_BoxName" runat="server"> <asp:ListItem Value="attr1" Selected="True"></asp:ListItem> <asp:ListItem Value="attr2"></asp:ListItem> <asp:ListItem Value="attr3"></asp:ListItem> </asp:DropDownList> </td> <td> <asp:DropDownList ID="ddl_BoxComparision" runat="server"> <asp:ListItem Value="=" Selected="true"></asp:ListItem> <asp:ListItem Value=">"></asp:ListItem> <asp:ListItem Value="<"></asp:ListItem> <asp:ListItem Value="Like"></asp:ListItem> <asp:ListItem Value="!="></asp:ListItem> </asp:DropDownList> </td> <td> <asp:TextBox ID="btn_boxval" runat="server" ></asp:TextBox> </td> <td> <asp:CheckBox ID="chk_DeleteBoxRow" runat="server" /> </td> </tr> 然后我添加一个CSS规则,如下所示: #TemplateRow { display:none; } 现在我们有一行可以用作添加新行的模板,并且.NET仍然可以生成模板的实际标记.需要注意的是,在对表使用此方法时,模板行需要位于要附加行的表的内部,以确保单元格的宽度合适. 我们需要做的最后一点标记是给表一个ID,以便我们可以操作脚本中的行.我选择了“BoxTable”. 现在,让我们构建我们的脚本.因为您使用的是.NET,所以请记住,对于具有runat =“server”属性的任何标记,生成的ID属性与您在控件的ID字段中指定的ID属性不同.一个简单的解决方法是执行以下操作: var myClientID = '<%= myServerID.ClientID() %>'; 然后,服务器将客户端ID输出到字符串中,以便在脚本中使用. 考虑到这一点,这是我们的脚本: var btn_AddAttr = '<%= btn_AddAttr.ClientID() %>'; $(function() { //attach the a function to the click event of the "Add Box Attribute button that will add a new row $('#' + btn_AddAttr).click(function() { //clone the template row,and all events attached to the row and everything in it var $newRow = $('#TemplateRow').clone(true); //strip the IDs from everything to avoid DOM issues $newRow.find('*').andSelf().removeAttr('id'); //add the cloned row to the table immediately before the last row $('#BoxTable tr:last').before($newRow); //to prevent the default behavior of submitting the form return false; }); //attach a remove row function to all current and future instances of the "remove row" check box $('#DeleteBoxRow').click(function() { //find the closest parent row and remove it $(this).closest('tr').remove(); }); //finally,add an initial row by simulating the "Add Box Attribute" click $('#' + btn_AddAttr).click(); }); 我认为这些评论非常详尽,但有必要对以下几点进行简要说明: 首先,当我们克隆模板行时,我们将布尔值传递给克隆函数.这说明除了我们克隆的DOM元素之外,我们还应克隆附加到这些元素的事件处理程序,并将它们附加到新克隆.这对于“删除行”复选框起作用很重要. 其次,我们还克隆了所有元素的所有属性,包括ID.我们不希望这样,因为它违反了XHTML合规性和我的原因问题.因此,我们剥离了其ID的所有克隆元素. 最后,因为您使用的是提交按钮,所以记住在按钮的单击事件中返回false非常重要,以避免它提交表单并导致回发. 希望这能回答你的问题.最后要记住的是,由于您使用jQuery创建所有这些行,因此服务器不会准备好接收输入值的对象.如果您需要服务器访问该信息,您必须找出向其发送该信息的方法. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- 事件(Event),绝大多数内存泄漏(Memory Leak)的
- ASP.NET API接口使用HttpClient进行测试和验证
- asp.net-mvc – 如何在mvc中使用图表控件
- 在ASP.NET MVC中的jQuery与MicrosoftAjax
- IdentityServer4 4.x版本 配置Scope的正确姿势
- asp.net-mvc – 尝试通过安全透明方法xxx来访问安
- Asp.net mvc – 获取上传文件的完整文件名
- asp.net-mvc – 在asp.net mvc中使用Checkbox提交
- asp.net-mvc – HandleErrorAttribute无法正常工
- asp.net-mvc-3 – 为什么我的textBoxFor使用我的