Forms jquery表单插件，用于在位编辑整个表单

我一直在搜索一个jquery插件，它可以帮助我在不必为表单和显示数据编写标记的情况下就地编辑整个表单。在这里，您只需单击“编辑”，然后将显示表单字段而不是文本，然后保存，表单字段将再次变成文本

---

有人知道吗？

这是最粗糙的插件：

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

（函数（$）{
var YesNo=新数组（）；
是否[“真”]=“是”；
是否[“假”]=“否”；
$.fn.inline=函数（）{
这个。每个（函数（）{
if（$（this）.is（'table'））{
$（this）.find（'input，select，textarea'）。not（'[type=button]，[type=submit]'）。each（function（）{
if（$（this.attr（“type”）==“复选框”）{
$（this.parent（）.append（“+YesNo[$（this.attr（'checked'））]+”）；
$（this.hide（）；
//$（this.append（“+$（this.val（）+”）；
$（this.bind（'blur'，function（））{
var t=YesNo[$（this.attr（'checked'））；
$（this.hide（）.next（）.show（）.text（t）；
});
}
否则{
$（this.parent（）.append（“+$（this.val（）+”）；
$（this.hide（）；
//$（this.append（“+$（this.val（）+”）；
$（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>

$（）.ready（函数（）{
$（'#dataform'）.inline（）；
});

以及支持的示例标记：

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

名字
姓
城市
国家
地位
活跃的
无精打采
悬而未决的
描述你好世界

不需要真正的插件。事实上，我认为定制解决方案更合适。发布一个标记示例。@Jakob:我有一个自定义jQuery插件，我就是为此编写的。我可以。如果你想试试的话，把它拉到你的邮箱id上。@conqenator-我很想知道，我怎么能在不被垃圾邮件攻击的情况下发布我的电子邮件？@Jakob:现在就在这里发布。并在我确认后删除您的评论。；）@conqenator-完美，thx；）