Как создать динамический и уникальный массив значений строк, которые изменяются в HTML-таблице

Question

У меня есть динамическая HTML-таблица, построенная из разных строк, где каждая строка имеет набор конкретных полей, таких как текстовые поля, и у меня есть кнопка, которая обновляет все измененные строк. удалось отследить, какая строка была изменена, где мы будем получать номер строки, которая была изменена

Как мне создать динамический массив всех номеров строк, которые изменяются в таблице как создать формат для измененных значений строки и отправить на сервер для обновления

        var m = 0;
        var changedrows = {};
        $.each($('input[id*=mid_],select[id*=mse_]')).live('change',function(m){
          var num= $(this).parent().html()*1; // Able to get the row  number correctly 
          alert("changed row is"+num);      
          changedrows[m] = {row:num};           
            m++;                      
         });

как мне создать динамический и уникальный массив.

Answer 1

Вы можете воспользоваться свойствами defaultValue и defaultSelected полей формы.Сначала найдите все входные данные, чье значение defaultValue отличается от его value:

var changedFields = $("input[id*=mid]").filter(function () {
    return this.defaultValue != this.value;
});

Затем найдите все поля списка, чье значение defaultSelected отличается от текущего выбора:

changedFields.add($("select[id*=mse_]").filter(function () {
    return !this.options[this.selectedIndex].defaultSelected;
}));

Обратите внимание, что если <option> не имеет атрибута selected, для всех опций defaultSelected будет иметь значение false.Один из способов решить эту проблему - найти вариант по умолчанию.Опция по умолчанию будет последней опцией, для которой defaultSelected имеет значение true, и если ни одна из них не делает, тогда опцией по умолчанию будет первая опция.

changedFields.add($("select[id*=mse_]").filter(function () {
    var defaultOption = $("option", this).filter(function () {
        return this.defaultSelected;
    });
    defaultOption = defaultOption.length ? defaultOption.last()[0] : this.options[0];
    return this.options[this.selectedIndex] != defaultOption;
}));

Затем найдите родительские строки:

var changedRows = changedFields.closest("tr");

Затем получите массив индексов строк из строк, используя .map():

var changedRowIndexes = changedRows.map(function () {
    return $(this).index();
}).get();

Теперь changedRowIndexes - это массив чисел, указывающих индекс каждой строки со входомизмененный элемент.

После того, как вы отправили изменения на сервер, неплохо было бы обновить defaultValue ваших входных данных:

changedFields.filter("input").each(function () {
    this.defaultValue = this.value;
});
changedFields.filter("select").each(function () {
    $("option", this).each(function () {
        this.defaultSelected = false;
    });
    this.options[this.selectedIndex].defaultSelected = true;
});

Answer 2

Я бы попробовал что-то вроде следующего (непроверенного) кода:

var changedrows = []; // Use an array

$('#yourtableid').on('change', 'input[id*=mid_],select[id*=mse_]', function() {
    var num = $(this).closest('tr').index();
    if(changedrows.indexOf(num) == -1) {
        changedrows.push(num);
    }
});

Answer 3

У вас уже есть массив всех измененных строк.

Теперь, когда вы хотите отправить формы, выполните цикл по массиву и используйте serialize () , чтобы преобразовать каждую измененную строку в строку запроса.

Каждая строка запроса начинается с "?" символ, поэтому вам нужно использовать substring (), чтобы справиться с этим.

Затем вы можете использовать $. Post для отправки данных на сервер.