Inline-Bearbeitung von Javascript, wie Abbrechen bearbeiten, um Originaldaten zu haben?

Question

Ich habe Daten

<tr id="row_1"> 
    <td id="td_1_1">Text 1</td> 
    <td id="td_2_1">Text 2</td> 
    <td><a href="#" onclick="editRow(1)">Edit row</a></td> 
</tr> 

dann in Javascript

in EditRow Funktion ich einige Ajax tun und TDs abrufen und ersetzen [$(row_id).html(html)] die TDs der Reihe. All das funktioniert gut. Aber ich brauche einen Cancel-Button, der die ursprünglichen TDs zurückbringt (also keine Eingabefelder). Irgendwelche Ideen, wie man diese Funktionalität erreicht? Muss ich die Zeile vor der Bearbeitung html in eine Variable kopieren, und später Abbrechen ersetzen Eingabefelder HTML? Danke für Ihre Hilfe.

EDIT

Auch wenn Benutzer irgendwo anders auf der Seite klickt, sollte es prüfen, wie wieder die ursprünglichen Daten löschen und bringen. Wie binden Sie diese Aktion?

Answer 1

Vor allem - schauen Sie in Javascript-Frameworks. Die Art der Funktionalität, über die Sie sprechen, ist so fortgeschritten, dass Sie, wenn Sie wirklich möchten, dass Ihr Code in allen Browsern korrekt funktioniert, dies nicht selbst tun sollten. Es würde Ihnen auch erlauben, Ihren HTML-Code frei von hässlichem Inline-Javascript und dergleichen zu halten, was als schlechte Praxis angesehen wird. Hier ist ein Gedanke:

Haben Sie in Betracht gezogen, zwei Zeilen pro Element, eine der Zeile in "bearbeiten Modus "und einer der Reihe im" normalen Modus "? Sie können die "Bearbeitungsmodus" -Reihen so gestalten, dass sie standardmäßig ausgeblendet sind. Wenn jemand auf den Bearbeitungslink klickt, können Sie diese Zeile ausblenden und die Bearbeitung anzeigen. Dies wäre wirklich einfacher als ein AJAX-Aufruf, um das Bearbeitungsformular zu erhalten.

EDIT

Here's some code to get you started:

function editRow(row_id, callback) { 
    // you would get this dynamically through ajax, thus why we need the callback 
    var html = '<tr id="edit_' + row_id + '" class="edit"><td><input type="text" name="td_1" value="Text 1"></td><td><input type="text" name="td_2" value="Text 2"></td><td><input type="submit" name="submit" value="submit"></td></tr>'; 
    callback(html); 
} 

$('a.edit', '#data').click(function() { 
    var $tr = $(this).closest('tr'); 
    var id = $tr.attr('id').split('_').pop(); 
    var edit_row = '#edit_' + id; 
    if($(edit_row).length == 1) { // edit row already exists 
     $tr.hide(); 
     $(edit_row).show(); 
    } else { // doesn't exist, fetch it 
     editRow(id, function(html) { 
      $tr.hide(); 
      $tr.after(html); 
     }); 
    } 
    return false; 
}); 

$(window).click(function(e) { 
    $('tr.edit:visible').each(function() { 
     var $tr = $(e.target).closest('tr'); 
     var id = $(this).attr('id').split('_').pop(); 
     console.log(e.target, $tr, this); 
     if($tr.attr('id') != this.id) { 
      $(this).hide(); 
      $('#row_' + id).show(); 
     } 
    }); 
}); 

ich wahrscheinlich darauf hingewiesen, dass es eine Menge von jQuery-Plugins, die eine Menge dies für Sie tun, und je nach den Anforderungen Ihrer Anwendung Sie Vielleicht ist es besser, die Reihe jedes Mal zu holen, sie überhaupt nicht zu holen usw. Dies ist nur eine ungefähre Vorstellung davon, was Sie tun müssen, um zu erreichen, was Sie wollen, und der Rest liegt bei Ihnen. :)

Answer 2

Ich denke, um die erste Funktionalität mit jQuery zu erhalten, können Sie das jEditable Plugin betrachten. Dies ist ein sehr funktionelles Plugin, das es Ihnen erlaubt, auf einen Text zu klicken und einen bearbeitbaren Bereich zu erstellen und abzubrechen usw. Ich gehe davon aus, dass wenn der Benutzer auf OK oder Speichern klickt, Sie nicht zum Original zurückkehren müssen ist ein Problem. jEditable kümmert sich darum.