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>

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

1 个答案: