实现步骤讲解:
首先需要在html页面创建一个table表格和一个动态添加行的按钮
<input type="button" onclick="addT()" value="添加" />
然后实现表格中追加行的js方法
//添加动态行(可在实现的列中添加相应的鼠标事件;在事件中添加相应的方法,不需要时可将onkeyup='fxKeyUp(" + fx + ")' onchange='fxKeyUp(" + fx + ")' onfocus='fxKeyUp(" + fx + ")' 删除)
function addT() {
var fx = $("#seg5 tr").length;
var fxCon = "<tr>" +
"<td><input type=text value='' id = 'a" + fx + "' /></td>" +
"<td><input type=text value='' id = 'b" + fx + "' /></td>" +
"<td><input type=text value='' id = 'e" + fx + "' onkeyup='fxKeyUp(" + fx + ")' onchange='fxKeyUp(" + fx + ")' onfocus='fxKeyUp(" + fx + ")' /></td>" +
"<td><input type=text value='' id = 'f" + fx + "' onkeyup='fxKeyUp(" + fx + ")' onchange='fxKeyUp(" + fx + ")' onfocus='fxKeyUp(" + fx + ")' /></td>" +
"<td><input type=text value='' id = 'g" + fx + "' onkeyup='fxKeyUp(" + fx + ")' onchange='fxKeyUp(" + fx + ")' onfocus='fxKeyUp(" + fx + ")' /></td>" +
"<td><input type=text value='' id = 'h" + fx + "' onkeyup='fxKeyUp(" + fx + ")' onchange='fxKeyUp(" + fx + ")' onfocus='fxKeyUp(" + fx + ")' /></td>" +
"<td><input type=text value='' id = 'j" + fx + "' disabled = disabled /></td>" +
"<td><input type=text value='' id = 'k" + fx + "' disabled = disabled /></td>" +
"<td><input type=text value='' id = 'l" + fx + "' disabled = disabled /></td>" +
"</tr>";
var fxPro = "#seg5 tr:eq(" + (fx - 1) + ")";//fx-1根据表格自身长度限定
$(fxCon).insertAfter($(fxPro));
}
function fxKeyUp(i) {
alert(i);//其中i代表该行的属于第几行
}
接下来是重点:保存行中的内容到数据库
在页面中定义一个隐藏的标签用于前后端交互
<asp:TextBox id="hidAddValue" runat="server" value="">
并定一个保存按钮事件
<asp:Button id="btnAdd" runat="server" onclick="btnAdd_Click"
onclientClick="contentin()">
当点击onclick事件时,首先执行onclientclick事件,在该事件中实现js
中录入的数据传递给隐藏标签的value中
function contentin() {
$("#hidAddValue").val("");
var a = $("#seg5 tr").length; //seg5 是table标签中的id
var name;
for (var i = 3; i < a; i++) {//i=3是因为该表格已经存在三行了,需要从第四行开始取数据
//!*!是分割符方便后台取数据 !┆!是每行的结尾,
//用于区分有多少行保存下来
name = "a" + i;
$("#hidAddValue").val($("#hidAddValue").val() + "!*!" + $("#" + name).val());
name = "b" + i;
$("#hidAddValue").val($("#hidAddValue").val() + "!*!" + $("#" + name).val());
name = "c" + i;
$("#hidAddValue").val($("#hidAddValue").val() + "!*!" + $("#" + name).val());
name = "d" + i;
$("#hidAddValue").val($("#hidAddValue").val() + "!*!" + $("#" + name).val());
name = "e" + i;
$("#hidAddValue").val($("#hidAddValue").val() + "!*!" + $("#" + name).val());
name = "f" + i;
$("#hidAddValue").val($("#hidAddValue").val() + "!*!" + $("#" + name).val());
name = "g" + i;
$("#hidAddValue").val($("#hidAddValue").val() + "!*!" + $("#" + name).val());
name = "h" + i;
$("#hidAddValue").val($("#hidAddValue").val() + "!*!" + $("#" + name).val());
name = "o" + i;
$("#hidAddValue").val($("#hidAddValue").val() + "!*!" + $("#" + name).val());
$("#hidAddValue").val($("#hidAddValue").val() + "!┆!");
}
}
后端处理只需要获取hidAddValue.Value中的值,并根据相应的分割符
截取即可此处案例省略
同样展示数据的方式,也是根据隐藏的hidAddValue标签进行交互
//通过Datatable获取数据,并根据 表.rows.count获取存入数据库中数据的
//长度循环赋值给hidAddValue.Value
//将下方代码放到循环中,拼接
hidAddValue.Value += "<tr>" +
"<td><input type=text value=\"" + dtjzjb.Rows[i]["ProjectCode"].ToString() + "\" id = \"a" + (i + 3).ToString() + "\"/></td>" +
"<td><input type=text value=\"" + dtjzjb.Rows[i]["MeasureUnit"].ToString() + "\" id = \"d" + (i + 3).ToString() + "\" /></td>" +
"<td><input type=text value=\"" + dtjzjb.Rows[i]["PContractNum"].ToString() + "\" id = \"e" + (i + 3).ToString() + "\" onkeyup='fxKeyUp(" + (i + 3).ToString() + ")' onchange='fxKeyUp(" + (i + 3).ToString() + ")' onfocus='fxKeyUp(" + (i + 3).ToString() + ")' /></td>" +
"<td><input type=text value=\"" + dtjzjb.Rows[i]["PBalanceNum"].ToString() + "\" id = \"f" + (i + 3).ToString() + "\" onkeyup='fxKeyUp(" + (i + 3).ToString() + ")' onchange='fxKeyUp(" + (i + 3).ToString() + ")' onfocus='fxKeyUp(" + (i + 3).ToString() + ")' /></td>" +
"<td><input type=text value=\"" + dtjzjb.Rows[i]["MContractPrice"].ToString() + "\" id = \"g" + (i + 3).ToString() + "\" onkeyup='fxKeyUp(" + (i + 3).ToString() + ")' onchange='fxKeyUp(" + (i + 3).ToString() + ")' onfocus='fxKeyUp(" + (i + 3).ToString() + ")' /></td>" +
"<td><input type=text value=\"" + dtjzjb.Rows[i]["MBalancePrice"].ToString() + "\" id = \"h" + (i + 3).ToString() + "\" onkeyup='fxKeyUp(" + (i + 3).ToString() + ")' onchange='fxKeyUp(" + (i + 3).ToString() + ")' onfocus='fxKeyUp(" + (i + 3).ToString() + ")' /></td>" +
"<td><input type=text id = \"j" + (i + 3).ToString() + "\" disabled = disabled /></td>" +
"<td><input type=text id = \"k" + (i + 3).ToString() + "\" disabled = disabled /></td>" +
"<td><input type=text id = \"l" + (i + 3).ToString() + "\" disabled = disabled /></td>" +
"</tr>";
//如上 和js动态添加行类似,只是对其传入了相应的数据
//dtjzjb.Rows[i]["MBalancePrice"].ToString()用于数据传递通过该方式
通过微软后端自带的调用js方式将值传递给相应的js方法
this.Page.ClientScript.RegisterStartupScript(this.GetType(),
Guid.NewGuid().ToString(), "<script type='text/javascript'>Show()</script>");
最后调用相应的js方法进行展示
//展示行
function Show() {
var a = $("#seg5 tr").length;
var aaa = "#seg5 tr:eq(" + (a - 1) + ")";
var dd = $("#hidAddValue").val();
if (dd == "") {
return;
}
$(dd).insertAfter($(aaa));
countFxKeyUp();
$("#hidAddValue").val("");
}
//统计
function countFxKeyUp() {
var fx = $("#seg5 tr").length;
for (var i = 3; i < fx; i++) {
fxKeyUp(i);
}
}
哈哈,感觉写的有点乱,凑乎看吧。。。