JS中动态的添加和删除行及在后台获得动态添加行中的值
2009-12-21 14:55
567 查看
实现的效果：
有个select的下拉框，选择不同的值时，会弹出不同的内容，实现了动态的交互。
1、动态的添加和删除行
前台插入的代码如下：
以上代码直接拷贝就能使用。
2、后台获得动态添加行中的值
后台的代码如下：
有个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"><!--
function check()
{
var tb=document.getElementById("tbody");
var value=document.getElementById("djmc");
//获得所有费率的标志
var flbz0=document.getElementById("flbz0");
var flbz1=document.getElementById("flbz1");
var flbz2=document.getElementById("flbz2");
//每次触发函数时，先删除添加的行
for(var i=0;i<6;i++)
{
var insertrow=document.getElementById("insertrow"+i);
if(insertrow!=null)
{
delete1(insertrow);
}
}
//选择单费率单价
if(value.value=="单费率单价")
{
var tr=tb.insertRow(1);
tr.setAttribute("id","insertrow0");
var td1=tr.insertCell();
td1.innerHTML="<table width=/"111/" border=/"0/"><tr><td height=/"47/">单费率单价</td></tr></table></td>";
var td2=tr.insertCell();
td2.innerHTML="<input type=/"text/" id=/"normalprice/" name=/"normalprice/" size=/"15/" />";
//设置费率标志
flbz0.selected="selected";
}
//选择出售单价
if(value.value=="出售单价")
{
//在指定的位置插入一行，其中insertrow中的参数是要插入行的位置
var ctr=tb.insertRow(1);
ctr.setAttribute("id","insertrow1");
//在要插入的行中插入第一列
var ctd1=ctr.insertCell();
//插入第一列中的内容 ，其中带“”的需要用/进行转义
ctd1.innerHTML="<table width=/"111/" border=/"0/"><tr><td height=/"47/">出售价格</td></tr></table></td>";
//在要插入的行中插入第二列
var ctd2=ctr.insertCell();
//插入第二列中的内容
ctd2.innerHTML="<input type=/"text/" id=/"saleprice/" name=/"saleprice/" size=/"15/" />";
//设置费率标志
flbz1.selected="selected";
}
//选择多费率单价
if(value.value=="多费率单价")
{
var dtr1=tb.insertRow(1);
dtr1.setAttribute("id","insertrow2");
var dtd1=dtr1.insertCell();
dtd1.innerHTML="<table width=/"111/" border=/"0/"><tr><td height=/"47/">多费率第1段单价</td></tr></table>";
var dtd2=dtr1.insertCell();
dtd2.innerHTML="<table width=/"111/" border=/"0/"><tr><td height=/"47/"><input type=/"text/" id=/"dj1/" name=/"dj1/" size=/"15/" /></td></tr></table>";
var dtr2=tb.insertRow(2);
dtr2.setAttribute("id","insertrow3");
var dtd3=dtr2.insertCell();
dtd3.innerHTML="<table width=/"111/" border=/"0/"><tr><td height=/"47/">多费率第1段单价</td></tr></table>";
var dtd4=dtr2.insertCell();
dtd4.innerHTML="<table width=/"111/" border=/"0/"><tr><td height=/"47/"><input type=/"text/" id=/"dj2/" name=/"dj2/" size=/"15/" /></td></tr></table>";
var dtr3=tb.insertRow(3);
dtr3.setAttribute("id","insertrow4");
var dtd5=dtr3.insertCell();
dtd5.innerHTML="<table width=/"111/" border=/"0/"><tr><td height=/"47/">多费率第1段单价</td></tr></table>";
var dtd6=dtr3.insertCell();
dtd6.innerHTML="<table width=/"111/" border=/"0/"><tr><td height=/"47/"><input type=/"text/" id=/"dj3/" name=/"dj3/" size=/"15/" /></td></tr></table>";
var dtr4=tb.insertRow(4);
dtr4.setAttribute("id","insertrow5");
var dtd7=dtr4.insertCell();
dtd7.innerHTML="<table width=/"111/" border=/"0/"><tr><td height=/"47/">多费率第1段单价</td></tr></table>";
var dtd8=dtr4.insertCell();
dtd8.innerHTML="<table width=/"111/" border=/"0/"><tr><td height=/"47/"><input type=/"text/" id=/"dj4/" name=/"dj4/" size=/"15/" /></td></tr></table>";
//设置费率标志
flbz2.selected="selected";
}
/*
var djlx=document.getElementById("djlx");
var flbz=document.getElementById("flbz");
var t=document.getElementById("0");
var tb=document.getElementById("tbody");
var f1=document.getElementById("fl");
var row=document.createElement("tr");
var cell=document.createElement("td");
var nodevalue=document.createTextNode("test");
cell.appendChild(nodevalue);
row.appendChild(cell);
tb.insertBefore(row,f1);
if(djlx.value==0)
{
t.selected="selected";
}*/
}
function delete1(deleterow)
{
var tb=document.getElementById("tbody");
tb.removeChild(deleterow);
}
// --></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);
}
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js动态添加删除,后台取数据(示例代码)
- js动态添加删除，后台取数据
- js动态添加删除,后台取数据(示例代码)
- js 动态添加行，删除行，并获得select中值赋予 input
- JS动态添加option和删除option
- js动态添加删除table单元格
- 如何实现将JS动态添加的TR中的值传到后台中并批量插入
- js 全选、反选、全不选、动态添加行、动态删除行
- 动态添加删除css/js文件
- 动态插入、添加删除表格行的JS代码
- html表格动态添加删除行(有后台操作）
- vue.js实现点击后动态添加class及删除同级class的实现代码
- 可以动态选取多个或者一个项的js方法。（可以动态添加 删除选项 js）
- Vue.js动态添加、删除选题的实例代码
- C#入门学习-----选项卡(更改显示样式、动态添加/删除、获得名称)
- C#入门学习-----选项卡(更改显示样式、动态添加/删除、获得名称)
- js动态添加表格逐行添加、删除、遍历取值的实例代码
- JS-DOM 综合练习-动态添加删除班级成绩表