плагин формы 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>