JS中动态的添加和删除行及在后台获得动态添加行中的值_js动态添加行,删除行,且每行的元素里面存在单选,多选,下拉选择框-优快云博客

本文介绍了一种利用JavaScript实现的动态交互表单方法，当用户从下拉菜单中选择不同选项时，表单将动态显示相应的输入字段。该方案支持单费率、出售单价及多费率等选项，并详细展示了如何从前端收集这些动态生成的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现的效果：

有个select的下拉框，选择不同的值时，会弹出不同的内容，实现了动态的交互。

1、动态的添加和删除行

前台插入的代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="szfeilv.aspx.cs" Inherits="power.szfeilv" %> <!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 runat="server"> <title>无标题页</title> <mce:script type="text/javascript" language="javascript"></mce:script> </head> <body> <form id="form1" runat="server" method="post"> <table width="200" border="1"> <tbody id="tbody"> <tr> <td width="111"><table width="111" border="0"> <tr> <td height="47">单价类型</td> </tr> </table></td> <td width="73"><table width="111" border="0"> <tr> <td height="47"> <select id="djmc" runat="server" onchange="check()"> <option selected="selected">请选择</option> <option value="单费率单价">单费率单价</option> <option value="出售单价">出售单价</option> <option value="多费率单价">多费率单价</option> </select> </td> </tr> </table></td> </tr> <tr id="fl"> <td><table width="111" border="0"> <tr> <td height="47">费率标志</td> </tr> </table></td> <td><table width="111" border="0"> <tr> <td height="47"> <select id="flbz" runat="server"> <option selected="selected">请选择</option> <option value="单费率" id="flbz0">单费率</option> <option value="出售单价" id="flbz1">出售单价</option> <option value="多费率" id="flbz2">多费率</option> </select> </td> </tr> </table></td> </tr> <tr> <td><table width="111" border="0"> <tr> <td height="47">分摊标志</td> </tr> </table></td> <td><table width="111" border="0"> <tr> <td height="47"> <select id="ftbz" runat="server"> <option selected="selected">请选择</option> <option value="自动分摊">自动分摊</option> <option value="手动分摊">手动分摊</option> </select> </td> </tr> </table></td> </tr> <tr> <td colspan="2"> <table width="228" border="0"> <tr> <td> <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /> </tr> </table> </td> </tr> </tbody> </table> </form> </body> </html>

以上代码直接拷贝就能使用。

2、后台获得动态添加行中的值

后台的代码如下：

using System; using System.Collections; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; using Model; using BLL; namespace power { public partial class szfeilv : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void Button1_Click(object sender, EventArgs e) { PriceInfo priceInfo = new PriceInfo(); PriceInfoBLL priceInfoBll = new PriceInfoBLL(); priceInfo.djmc = this.djmc.Value; string flag = this.flbz.Value; //JS中动态插入的行，通过Request.Form["Name"]获得参数的值 priceInfo.normalprice = Request.Form["normalprice"]; priceInfo.saleprice = Request.Form["saleprice"]; priceInfo.dj1 = Request.Form["dj1"]; priceInfo.dj2 = Request.Form["dj2"]; priceInfo.dj3 = Request.Form["dj3"]; priceInfo.dj4 = Request.Form["dj4"]; Response.Write("flbz=" + this.flbz.Value); Response.Write("djmc=" + djmc.Value); Response.Write("ftbz=" + ftbz.Value); Response.Write("ssss=" + Request.Form["normalprice"]); if (this.flbz.Value == "单费率") { priceInfo.flbz = "0"; } else if (this.flbz.Value == "出售单价") { priceInfo.flbz = "1"; } else if (this.flbz.Value == "多费率") { priceInfo.flbz = "2"; } if (this.ftbz.Value == "自动分摊") { priceInfo.ftbz = "0"; } else if (this.ftbz.Value == "手动分摊") { priceInfo.ftbz = "1"; } int flag1 = priceInfoBll.insertPriceInfo(priceInfo); Response.Write("flag=" + flag1); } } }