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

我会尝试以下（未经测试的）代码：

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 2

您可以利用表单字段的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 3

您已经拥有所有已更改行的数组。

现在，当您想要提交表单时，循环遍历您的数组并使用serialize()将每个更改的行转换为查询字符串。

每个查询字符串将以“？”开头字符，所以你需要使用substring（）来处理它。

然后，您可以使用$.post将数据提交到服务器。

如何创建在html表中更改的动态且唯一的行值数组

3 个答案: