plugin forme jquery pour modifier une forme entière en place

Question

J'ai cherché un peu pour un plugin jquery qui pourrait me aider à modifier une forme entière en place sans avoir à écrire un balisage pour la forme et l'affichage des données. Là où vous pouvez simplement cliquer sur "modifier", les champs du formulaire apparaîtront à la place du texte, puis enregistrer et les champs du formulaire redeviendront texte.

Quelqu'un en connaît-il un?

Answer 1

est ici le plugin dans sa forme la plus grossière:

(function($){ 
    var YesNo = new Array(); 
     YesNo["true"] = "Yes"; 
     YesNo["false"] = "No"; 
    $.fn.inline = function() { 
      this.each(function(){ 
      if ($(this).is('table')) { 
       $(this).find('input, select, textarea').not('[type=button],[type=submit]').each(function(){ 
        if($(this).attr("type")=="checkbox"){ 
         $(this).parent().append("<span class=\"editable\">"+YesNo[$(this).attr('checked')]+"</span>"); 
         $(this).hide(); 
         //$(this).append("<span>"+$(this).val()+"</span>"); 
         $(this).bind('blur',function(){ 
          var t = YesNo[$(this).attr('checked')]; 
          $(this).hide().next().show().text(t); 
         }); 
        } 
        else{ 
         $(this).parent().append("<span class=\"editable\">"+$(this).val()+"</span>"); 
         $(this).hide(); 
         //$(this).append("<span>"+$(this).val()+"</span>"); 
         $(this).bind('blur',function(){ 
          var t = $(this).val(); 
          $(this).hide().next().show().text(t); 
         }); 
        } 
       }); 
       $(this).find('td').live('dblclick', function(){ 
         $(this).children('.editable').hide().prev().show().focus(); 
       }); 
      }  
     }); 
     }; 
    })(jQuery); 

Appel à plugin:

<script type="text/javascript"> 
$().ready(function() { 
     $('#dataform').inline(); 
    }); 
</script> 

Et le balisage exemple soutien:

<table id="dataform"> 
     <tr> 
      <td class="label">First Name</td> 
      <td><input type="text" value="Robin" /> </td> 

      <td class="label">Last Name</td> 
      <td><input type="text" value="Maben" /> </td> 
     </tr> 

     <tr> 
      <td class="label">City</td> 
      <td><input type="text" value="Bangalore" /> </td> 

      <td class="label">Country</td> 
      <td><input type="checkbox" checked="checked" /> </td> 
     </tr> 
     <tr> 
      <td class="styleLabel">Status</td> 
      <td class="styleControl"> 
       <select id="Select1" class="styleDrop"> 
        <option>Active</option> 
        <option>Inavtive</option> 
        <option>Pending</option> 
       </select></td> 
     </tr> 
     <tr> 
      <td>Description</td><td><textarea>Hello World</textarea></td> 
     </tr> 
     <tr> 
      <td> 
       <input type = "button" value="Click" /> 
       <input type = "submit" /> 
      </td> 
     </tr> 

    </table>