bearbeiten anstelle

Question

Ich habe eine Tabelle wie folgt

<tr> 
    <td>No.</td> 
    <td>Username</td> 
    <td>Password</td> 
    <td>Valid Until</td> 
    <td>Delete</td> 
    <td>Edit</td> 
</tr> 
<tr> 
    <td>1</td> 
    <td id="1"> 
       <div class="1u" style="display: none;">Username</div> 
       <input type="text" class="inputTxt" value="Username" style="display: block;"/> 
      </td> 
    <td id="1"> 
       <div class="1p" style="display: none;">Password</div> 
       <input type="text" class="inputTxt" value="Password" style="display: block;"/></td> 
    <td>18 Jul 09</td> 
    <td><button value="1" class="deleteThis">x</button></td> 
    <td class="editRow">Edit</td> 
</tr> 

Wenn bearbeiten geklickt wird ich diese Funktion ausführen dies den Text mit Eingabefeld ersetzt, so was i will diese zurück zu stornieren, wenn irgendwo anders in Text ist Klick statt Speichern.

 $('.editRow').click(function() { 
     var row = $(this).parent('tr'); 

     row.find('.1u').slideUp('fast'); 
     row.find('.1p').slideUp('fast'); 
     row.find('.inputTxt').slideDown('fast'); 

    }).blur(function() { 
     row.find('.inputTxt').slideUp('fast'); 
     row.find('.1u').slideDown('fast'); 
     row.find('.1p').slideDown('fast'); 
    }); 

mit dieser Funktion Text ändert sich in Eingabefelder, aber Eingabefelder nicht zurück zum Text, wenn ich irgendwo anders klicke.

Vielen Dank.

Answer 1

bearbeitet gerade meine Funktion, weil das Plugin nicht gut für meine Anwendung Hotel hat

 $('.editRow').live('click', function() { 
      var row = $(this).parent('td').parent('tr'); 
      row.find('.1u').slideUp('fast'); 
      row.find('.1p').slideUp('fast'); 
      row.find('.inputTxt').slideDown('fast'); 
      $(this).parent('td').empty().append('<a href=# class=cancel>Cancel</a>/<a href=# class=save>Save</a>'); 
    }); 

Answer 2

Ihre Unschärfe wird auf die Schaltfläche (td.editRow) angewendet, aber nicht auf die Eingabefelder angewendet. Ich denke du solltest den Code trennen und es sollte funktionieren.

 $('.editRow').click(function() { 
       var row = $(this).parent('tr'); 

       row.find('.1u').slideUp('fast'); 
       row.find('.1p').slideUp('fast'); 
       row.find('.inputTxt') 
        .slideDown('fast') 
        .blur(function() { 
         row.find('.inputTxt').slideUp('fast'); 
         row.find('.1u').slideDown('fast'); 
         row.find('.1p').slideDown('fast'); 
        }); 
     }); 

Answer 3

Es gibt eine nice plugin für dieses