Обновить только те поля, которые были изменены или добавлены пользователем

Question

Здесь я добавил только часть полного кода. Я хочу, чтобы код выполнялся, когда он отправлен, я хочу, чтобы он обновлял поля в таблице, которые были изменены, а не каждый элемент в каждой строке (поскольку некоторые из них имеют значение NULL и должны оставаться такими) ,

Так что в конечном итоге - как бы я закодировал страницу процесса PHP.

Таблица отформатирован как heli_cust:
cust_id
cust_fname
cust_lname
cust_kg
cust_email
cust_addr
cust_phone

http://jsfiddle.net/qz7k5caj/

HTML:

<table width="100%"> 
<div class="form_head">Passengers</div> 
<table width="100%" cellpadding="4" cellspacing="0" id="px"> 
<thead> 
<tr class="tab_head"> 
<td width="25px" style="text-align:center; color:#FFFFFF; font-size:11px;">#</td> 
<td class="form_label" style="color:#ffffff; font-size:11px;">Cust#</td> 
<td class="form_label" style="color:#FFFFFF; font-size:11px;">First Name</td> 
<td class="form_label" style="color:#FFFFFF; font-size:11px;">Last Name</td> 
<td class="form_label" style="color:#FFFFFF; font-size:11px;">Wgt</td> 
<td class="form_label" style="color:#FFFFFF; font-size:11px;">Address</td> 
<td class="form_label" style="color:#FFFFFF; font-size:11px;">Phone</td> 
<td class="form_label" style="color:#FFFFFF; font-size:11px;">Email</td> 
<td></td> 
</tr> 
</thead> 
<tbody id="tbl1"> 
<?php if ($cust = mysql_fetch_assoc($getcust)) { 
    do { ?> 
<tr id="pass"> 
<td style="vertical-align:middle; text-align:center"><input type="text" name="pass_num[]" readonly="readonly" value="1" class="pass" style="font:Verdana; font-size:11px; border:none; background-color:transparent; width:25px; text-align:center; vertical-align:middle;" tabindex="-1"></td> 
<td><input type="text" readonly="readonly" class="form_a" value="<?php echo (int)$cust[cust_id] ?>" style="text-align:right; border:none; background-color:transparent; width:25px" /></td> 
<td><input type="text" name="cust_fname[]" class="form_g" value="<?php echo $cust[cust_fname] ?>"/></td> 
<td><input type="text" name="cust_lname[]" class="form_g" value="<?php echo $cust[cust_lname] ?>"/></td> 
<td><input type="text" name="cust_kg[]" class="form_a" value="<?php echo $cust[cust_kg] ?>"/></td> 
<td><input type="text" name="cust_addr[]" class="form_c" style="width:200px" value="<?php echo $cust[cust_addr] ?>"/></td> 
<td><input type="text" name="cust_phone[]" class="form_g" value="<?php echo $cust[cust_phone] ?>"/></td> 
<td><input type="text" name="cust_email[]" class="form_b" value="<?php echo $cust[cust_email] ?>"/></td> 
<td style="vertical-align:middle"><a class="removePax"><img src="images/remove_pax.png" /></a></td> 
</tr> 
<?php } while ($cust = mysql_fetch_assoc($getcust)); 
} ?> 
</tbody> 
</table> 
<table width="100%"> 
<tr><td style="text-align:right"><a id="add">&nbsp;<img src="images/add_pax.gif">&nbsp;</a></td></tr> 
</table> 
<br /> 
<table width="100%"><tr><td></td><td style="text-align:right"><input type="submit" value="Update" /></td></tr> 
</table> 

JQuery:

$("#tbl1 tr:even").css({"background-color":"#CCC", "opacity":"0.8"}); 
$("#tbl1 tr:odd").css({"background-color":"#FFF", "opacity":"0.8"}); 
$(".pass").each(function(){ 
    $(this).val($(this).closest('tr').index()+1); 
}); 

$("#tbl1 .removePax").on("click",function() { 
    if($("#tbl1 tr:last").index() >0) { 
     var tr = $(this).closest('tr'); 
      tr.css("background-color","#FF3700"); 
      tr.fadeOut(500, function(){ 
       tr.remove(); 
       $(".pass").each(function(){ 
        $(this).val($(this).closest('tr').index()+1); 
       }); 
       $("#tbl1 tr:even").css({"background-color":"#CCC", "opacity":"0.8"}); 
       $("#tbl1 tr:odd").css({"background-color":"#FFF", "opacity":"0.8"}); 
      }); 
      return false; 
    } else { 
    if($(this).closest('tr').index() == 0) { 
     $("#tbl1 tr:eq(0)").find("input").each(function(){ 
      if ($(this).hasClass('pass')) { 
      } else { 
       $(this).val(''); 
      }; 
     }); 
    }; 
    }; 
}); 

$("#add").click(function(){ 
    $("#tbl1 tr:first").clone().find("input").each(function() { 
     $(this).val('')}).end().appendTo("#tbl1"); 
     $("#tbl1 tr:even").css({"background-color":"#CCC", "opacity":"0.8"}); 
     $("#tbl1 tr:odd").css({"background-color":"#FFF", "opacity":"0.8"}); 
     $(".removePax").on("click",function() { 
      if($("#tbl1 tr:last").index() >0) { 
       var tr = $(this).closest('tr'); 
       tr.css("background-color","#FF3700"); 
       tr.fadeOut(500, function(){ 
        tr.remove(); 
        $(".pass").each(function(){ 
         $(this).val($(this).closest('tr').index()+1); 
        }); 
        $("#tbl1 tr:even").css({"background-color":"#CCC", "opacity":"0.8"}); 
        $("#tbl1 tr:odd").css({"background-color":"#FFF", "opacity":"0.8"}); 
       }); 
       return false; 
      } else { 
      if($(this).closest('tr').index() == 0) { 
       $("#tbl1 tr:eq(0)").find("input").each(function(){ 
        if ($(this).hasClass('pass')) { 
        } else { 
         $(this).val(''); 
        } 
       }).end(); 
      } else { 
       var tr = $(this).closest('tr'); 
       tr.css("background-color","#FF3700"); 
       tr.fadeOut(500, function(){ 
        tr.remove(); 
        $(".pass").each(function(){ 
         $(this).val($(this).closest('tr').index()+1); 
        }); 
        $("#tbl1 tr:even").css({"background-color":"#CCC", "opacity":"0.8"}); 
        $("#tbl1 tr:odd").css({"background-color":"#FFF", "opacity":"0.8"}); 
       }); 
       return false; 
      } 
      }; 
     }); 
     $(".pass").each(function(){ 
       $(this).val($(this).closest('tr').index()+1); 
     }); 
    }); 
}); 

Answer 1

Помимо идеи дается @rjdown, в случае, если вы пытаетесь сделать это с помощью AJAX, вы можете добавить обработчик onchange и добавить класс «изменен» на измененный элемент. Затем просто отправьте все измененные данные обратно на ваш сервер. Таким образом, вы точно знаете, что вам нужно отправить.