时间戳

首页 > 解决方案 > Jquery 将新行追加到 html 表

jquery - Jquery 将新行追加到 html 表

问题描述

我正在使用 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);
        }
    });
});

标签： jqueryhtml-table

解决方案

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

 tblWeeklyHtml.html(s);

至：

 $(tblWeeklyHtml).append(s);

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

推荐阅读