Js动态追加行，并将内容保存到数据库，并取出数据通过js动态显示

实现步骤讲解:
首先需要在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);
    }
}

哈哈，感觉写的有点乱，凑乎看吧。。。