Jquery在html表中追加新行

Question

我正在使用jQuery在html表中动态追加行所有内容都像魅力一样，但是当我尝试添加新行时，它会丢失表中的输入值我不明白为什么？请帮帮我

当我添加第一行时：

再次单击“添加新行”后，它将丢失上一行的输入值：

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

$("#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);
        }
    });
});

Answer 1

你应该附加到你的桌子的身体，而不是用s替换身体，所以改为：

 tblWeeklyHtml.html(s);

至：

 $(tblWeeklyHtml).append(s);

此外，由于您要附加到表体，因此不必在s内获取表体的html，因此将其初始化为空字符串。