Jquery 将新行追加到 html 表答案

【问题标题】：Jquery Append new row to the html tableJquery 将新行追加到 html 表
【发布时间】：2018-10-06 08:40:51
【问题描述】：

我正在使用 jQuery 在 html 表中动态追加行，一切都像魅力一样工作，但是当我尝试添加新行时，它会丢失表中输入的值我不明白为什么？请帮我解决这个问题

当我添加第一行时：

再次点击Add New Row后会丢失前一行的输入值：

这是我在 jquery 中追加行的代码：

$("#btnAddNewRow").click(function(e) {
    e.preventDefault();
    var ScheduleId = <%= ScheduleID%>;
    var tblWeeklyHtml = $('#tblweeklyData > tbody');
    alert(tblWeeklyHtml.clone().html());
    var s = tblWeeklyHtml.html();
    $.ajax({
        type: "POST",
        url: "/hris2/manager/schedule/schedule.aspx/updateweeklyTableTitle",
        data: '{Schedule_Id: ' + ScheduleId + ', WrId: "-1", Title: "" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(response) {
            var NewWrID;
            var Day1 = new Date($('#txtDate0').html());
            var Day2 = new Date($('#txtDate1').html());
            var Day3 = new Date($('#txtDate2').html());
            var Day4 = new Date($('#txtDate3').html());
            var Day5 = new Date($('#txtDate4').html());
            var Day6 = new Date($('#txtDate5').html());
            var Day7 = new Date($('#txtDate6').html());

            var Month1 = Day1.getMonth() + 1;
            var Month2 = Day2.getMonth() + 1;
            var Month3 = Day3.getMonth() + 1;
            var Month4 = Day4.getMonth() + 1;
            var Month5 = Day5.getMonth() + 1;
            var Month6 = Day6.getMonth() + 1;
            var Month7 = Day7.getMonth() + 1;

            NewWrID = response.d;
            s += '<tr class="off">';
            s += '<td class="gridCellEmpData">';
            s += '<input type="text" id=' + NewWrID + ' onchange="updateweeklyTableTitle(this.value,' + ScheduleId + ',this.id);" class="weeklyTable" /></td>';

            s += '<td class="gridCellEmpData">';
            s += '<input type="text" id=' + NewWrID + ' onchange="updateweeklyTableData(-1,this.id,' + Day1.getDate() + ',' + Month1 + ',' + Day1.getFullYear() + ',this.value);" class="weeklyTable"  style="width: 60px;" /></td>';

            s += '<td class="gridCellEmpData">';
            s += '<input type="text" id=' + NewWrID + ' onchange="updateweeklyTableData(-1,this.id,' + Day2.getDate() + ',' + Month2 + ',' + Day2.getFullYear() + ',this.value);" class="weeklyTable" style="width: 60px;" /></td>';

            s += '<td class="gridCellEmpData">';
            s += '<input type="text" id=' + NewWrID + ' onchange="updateweeklyTableData(-1,this.id,' + Day3.getDate() + ',' + Month3 + ',' + Day3.getFullYear() + ',this.value);" class="weeklyTable" style="width: 60px;" /></td>';

            s += '<td class="gridCellEmpData">';
            s += '<input type="text" id=' + NewWrID + ' onchange="updateweeklyTableData(-1,this.id,' + Day4.getDate() + ',' + Month4 + ',' + Day4.getFullYear() + ',this.value);" class="weeklyTable" style="width: 60px;" /></td>';

            s += '<td class="gridCellEmpData">';
            s += '<input type="text" id=' + NewWrID + ' onchange="updateweeklyTableData(-1,this.id,' + Day5.getDate() + ',' + Month5 + ',' + Day5.getFullYear() + ',this.value);" class="weeklyTable" style="width: 60px;" /></td>';

            s += '<td class="gridCellEmpData">';
            s += '<input type="text" id=' + NewWrID + ' onchange="updateweeklyTableData(-1,this.id,' + Day6.getDate() + ',' + Month6 + ',' + Day6.getFullYear() + ',this.value);" class="weeklyTable" style="width: 60px;" /></td>';

            s += '<td class="gridCellEmpData">';
            s += '<input type="text" id=' + NewWrID + ' onchange="updateweeklyTableData(-1,this.id,' + Day7.getDate() + ',' + Month7 + ',' + Day7.getFullYear() + ',this.value);" class="weeklyTable" style="width: 60px;" /></td>';
            s += '</tr">';
            tblWeeklyHtml.html(s);
        },
        failure: function(response) {
            alert(response.d);
        }
    });
});

【问题讨论】：

因为您每次进行 ajax 调用时都会用 s 替换 tblWeeklyHtml 的 html。您应该将 s 附加到表的正文中。
不，我只是将前一个 html 分配给 s，然后用 s+="" 附加更多 tr
没有理由通过设置s =来替换现有的Html，只需将新行附加到表体。
嘿，它保留了第一个输入值，但现在它附加了两行而不是 1，当我再次单击时，它添加了四行而不是 1
在创建行之前您可能没有清除 s 中的值。

标签： jquery html-table

【解决方案1】：

您应该附加到表格的主体，而不是用 s 替换主体，因此更改为：

 tblWeeklyHtml.html(s);

收件人：

 $(tblWeeklyHtml).append(s);

另外，由于是追加到表体，所以不需要在s内部获取表体的html，所以初始化为空字符串。

【讨论】：