Question

我从服务器接收此表:(使用ajax）：

   $.each(data, function(i, item) {
        $('#MyTable tbody').append("<tr>"d
             +"<td>" +data[i].A+ "</td><td>" 
             +data[i].B
             +"</td><td><input type='text' value='"
             +data[i].C+"'/></td><td><input type='text' value='"
             + data[i].D+"'/></td>"
             + "</tr>");
        });

C和D是编辑文本，用户可以更改它们。在用户更改后，数据将发送到服务器。

我在更改D列时遇到问题。当仅更改D列时，在“newData”（从此代码行：“var newData = getUserData();”）中，我得到“... {...”C“：”x“} .. “我希望得到”...... {......“D”：“x”} ......“。为什么？（“x”是D列中的数据exp）。（其他选项运作良好）。

function getUserData()
{
    var newData = new Array();
    $.each($('#MyTable tbody tr'),function(key,val){
         var inputF = $(this).find("input[type=text].changed");   
        var fileldValues = {};
        fileldValues['c'] = $(inputF[0]).val();
        fileldValues['d'] = $(inputF[1]).val();
        fileldValues['a'] = $($(this).children()[0]).text();
        fileldValues['b'] = $($(this).children()[1]).text();
        newData.push(fileldValues);
    });
    return JSON.stringify(newData);
}

function saveNewData(){

var newData = getUserData();
$.ajax({
    type: "GET",
    url: "save",
    dataType: "json",
    data: { 
    newData: newData},
    contentType : "application/json; charset=utf-8",
    success : function(data) {
    },
    error : function(jqXHR, textStatus, errorThrown) {
        location.reload(true);
    }
}); 
}

我也在使用这个活动：

$('#MyTable input[type=text]').on('change',function() {
     $(this).addClass('changed');
})

Answer 1

这是因为您正在使用.changed元素而不检查它是C还是D. 例如。让我们采取所有可能的场景 1.你只改变C： - 现在输入C有class .changed因此执行“fileldValues ['c'] = $（inputF [0]）。val（）;”给'c'正确的值。 2.你改变了两个 - 然后两个字段都有类.changed，因此两个调用再次工作 3.问题 - 只改变D - 这意味着CInput字段不会有类.changed但D字段会。因此，当您使用选择器获取它时，现在inputF [0]实际上是字段D，因为它是类更改的唯一字段。这就是为什么D中的值写在C fieldValue中。

要解决此问题，只需创建一种方法来了解哪一个已更改，以便将更改后的值分配给正确的fieldValue。

你可以采取很多方法来开始识别C和D.我个人会选择将它们添加到不同的附加类中。因为你有tr对象而你使用find你只会收到那个元素中符合选择器的对象，所以在C输入中添加一个“C”类，在D输入中添加一个“D”类会给你一个方法要知道哪个是哪个（记住一个元素可以有很多类，所以它不是你在后面附加的。以后的问题），这将看起来像： 1.创建表格时：

$.each(data, function(i, item) {
    $('#MyTable tbody').append("<tr>"d
         +"<td>" +data[i].A+ "</td><td>" 
         +data[i].B
         +"</td><td><input type='text' class='C' value='"
         +data[i].C+"'/></td><td><input type='text' class='D' value='"
         + data[i].D+"'/></td>"
         + "</tr>");
    });

然后在你的getUserData函数中，你将首先获得这些项目，然后检查它们是否被更改（更改了类）：

function getUserData()
{
    var newData = new Array();
    $.each($('#MyTable tbody tr'),function(key,val){              
        var inputC = $(this).find(".C");
        var inputD = $(this).find(".D");
        var fileldValues = {};
        fileldValues['c'] = $(inputC).val();
        fileldValues['d'] = $(inputD).val();
        fileldValues['a'] = $($(this).children()[0]).text();
        fileldValues['b'] = $($(this).children()[1]).text();
        newData.push(fileldValues);
    });
    return JSON.stringify(newData);
}

因为你总是使用他们的价值观我不确定你为什么要特别检查是否有任何改变？如果您只想发送更改的值，则可以通过以下方式修改：

function getUserData()
{
    var newData = new Array();
    $.each($('#MyTable tbody tr'),function(key,val){ 
        var fileldValues = {};

        var inputC = $(this).find(".C");
        if ($(inputC).hasClass("changed")) { 
           fileldValues['c'] = $(inputC).val();
        }
        var inputD = $(this).find(".D");
        if ($(inputD).hasClass("changed")) { 
           fileldValues['d'] = $(inputD).val();
        }

        fileldValues['a'] = $($(this).children()[0]).text();
        fileldValues['b'] = $($(this).children()[1]).text();
        newData.push(fileldValues);
    });
    return JSON.stringify(newData);
}

希望有所帮助（并且工作没有时间对其进行测试）。还有其他一些方法可以做到这一点，使用属性，ID（不建议Id应该是唯一的），甚至是jQuery数据方法。不确定哪一个是最好的，但这个对我来说最容易

从表中更新数据

1 个答案: