實現步驟講解:
首先需要在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);
    }
}

哈哈，感覺寫的有點亂，湊乎看吧。。。