仅从表中发送更改的数据

时间:2014-07-15 17:47:03

标签: javascript jquery html ajax json

我从服务器接收此表:(使用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是编辑文本,用户可以更改它们。在用户改变之后我想&#34;采取&#34;表中所有已按行更改的数据(所有已更改的行,即使只更改了C(或D)),也通过带有JSON的ajax发送它。如何将数据读取为JSON?

我开始写一个,但我被困住了(这样我发送所有表,而不是唯一改变的行,我想发送已经更改的唯一行):

function getUserData()
{
    var newData = new Array();
    $.each($('#MyTable tbody tr'),function(key,val){
        var inputF = $(this).find("input[type=text]");          
        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);
    }
}); 
}

1 个答案:

答案 0 :(得分:3)

为您的文字字段添加onchange事件。触发时,为该元素添加一个类名。在保存代码中,仅选择具有该类名的元素。

事件:

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

变化:

  var inputF = $(this).find("input[type=text]"); 

为:

  var inputF = $(this).find("input[type=text].changed");