Jquery Добавить новую строку в таблицу HTML - PullRequest
Новая
       6

Jquery Добавить новую строку в таблицу HTML

0 голосов
/ 25 апреля 2018

Я использую jQuery для динамического добавления строк в html-таблицу, все работает как чудо, но когда я пытаюсь добавить новую строку, это потеряет значение входных данных в таблице. Я не понимаю, почему?Пожалуйста, помогите мне в этом

Пока я добавляю первую строку:

И после повторного нажатия Добавить новую строку она потеряетвходное значение предыдущей строки:

Это мой код для добавления строк в 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);
        }
    });
});

1 Ответ

0 голосов
/ 25 апреля 2018

Вы должны добавить в тело таблицы, а не заменять тело на s, поэтому измените с: 

 tblWeeklyHtml.html(s);

Кому: 

 $(tblWeeklyHtml).append(s);

Кроме того, поскольку вы добавляете тело таблицы, нет необходимости получать html тела таблицы внутри s, поэтому инициализируйте его пустой строкой.

...