jquery表单插件来编辑整个表单

Question

我一直在寻找一个jQuery插件，可以帮助我编辑整个表单，而不必为表单和显示数据编写标记。在那里你可以点击“编辑”，然后表单字段将出现而不是文本，然后保存并且表单字段会再次变成文本。

有人知道吗？

Answer 1

下面是它的最原始形式的插件：

(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); 

电话插件：

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

而且配套示例标记：

<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>