[Shaci]

Ну вот вам пример, по-моему первый плагин, который я написал,
Он, конечно, ужасен, и работает только в FF (переделывать щас лень) ))))))))), но в нем есть динамическое добавление элементов.


плагин

//Плагин работает так, как я хотел, но есть несколько багов
//1 не работает в IE (нехороший баг)
//2? по поводу простановк ttd.css({width:text.outerWidth()}); - нехороший но никак не влияющий
//3 выпадение из тела таблицы в дальшнейшем
(function($) {
    $.fn.spisok = function(options) {

        var defaults = {editColor: '#87CEEB',
                     deleteColor: '#87CEEB',
                     mainButtonColor: '#4682B4',
                     mainColor: '#87CEEB',
                     color:["#87CEEB","#D2691E","#8B008B","#008000"],
                     colorBut: true
    };
    var settings = $.extend(defaults, options);        
        this.each(function(){
            var text = $('<input type = "text">');
            var ttd = $('<td></td>');            
            $(this).after(text);
            $(this).css({background:settings.mainColor});
            ttd.css({width:text.outerWidth()});
            var ttr = $('<tr class="addition"></tr>');
            ttr.append(ttd);
            $(this).wrap(ttr).after(text);
            //ttd.css({width:text.outerWidth()});
            text.show();
            text.hide();
            var td = $('<td></td>');
            var td1 = $('<td></td>');
            var editList = $('<button>edit</button>');
            var deleteList = $('<button class="pointer">delete</button>');            
            td.append(editList);
            td1.append(deleteList);            
            text.parent().after(td);
            td.after(td1);
            globalWidth = text.outerWidth();
            editList.css({width:deleteList.outerWidth()});
            editList.css({background:settings.editColor});
            deleteList.css({background:settings.deleteColor});
            var current = this;
            editList.click(function(){
                if (editList.text() == 'edit') {
                    editList.text('confirm');
                    $(current).hide();
                    text.show();
                    text.val($(current).text());
                }
                else {
                    editList.text('edit');
                    text.hide();
                    $(current).text(text.val());
                    $(current).show();
                }
            })
            deleteList.click(function(){
                $(current).parent().parent().remove();
            })
            text.keydown(function(e){
                switch(e.keyCode) {
                case 13:
                    text.hide();
                    $(current).text(text.val());
                    $(current).show();
                    editList.text('edit');
                }
            })
        })
        $('tr.addition').wrapAll('<table></table>');
        var mainButton = $('<button>New List Item</button>');
        mainButton.css({background:settings.mainButtonColor});
        $('tbody').append(mainButton);
        var colorButton = $('<button>Color</button>');
        colorButton.css({background:settings.mainColor})
        var trButton = $("<tr class='addition'></tr>");
        mainButton.wrap(trButton);
        trButton.append(colorButton);
        if(settings.colorBut)
        mainButton.after(colorButton);            
          colorButton.click(function(){
              for (var i = 0; i < settings.color.length; i++) {
                if (settings.mainColor == settings.color[i]) {
                    if (i == (settings.color.length - 1))
                        settings.mainColor = settings.color[0]
                    else
                    settings.mainColor = settings.color[i + 1];
                break;
                }
              }
              colorButton.css({background:settings.mainColor});
            })
        mainButton.click(function () {
            var tr = $('<tr class="addition"></tr>');
            var ttd = $('<td></td>');
            ttd.css({width:globalWidth});
            var li = $('<li>New List Item</li>');
            li.css({background:settings.mainColor});
            ttd.append(li);
            tr.append(ttd);
            var text = $('<input type = "text">');
            var editList = $('<button>edit</button>');
            var deleteList = $('<button class="pointer">delete</button>');
            editList.css({background:settings.editColor});
            deleteList.css({background:settings.deleteColor});            
            if($('*').is('.pointer'))
            $('.pointer:last').parent().parent().after(tr);
            else {
                mainButton.parent().before(li.parent().parent());
            }
            li.after(text);            
            text.hide();
            var td = $('<td></td>');
            var td1 = $('<td></td>');
            td.append(editList);
            td1.append(deleteList);
            text.parent().after(td);
            td.after(td1);
            editList.css({width:deleteList.outerWidth()});
            editList.click(function(){
                if (editList.text() == 'edit') {
                    editList.text('confirm');
                    li.hide();
                    text.show();
                    text.val(li.text());
                }
                else {
                    editList.text('edit');
                    text.hide();
                    li.text(text.val());
                    li.show();
                }
            })
            deleteList.click(function(){
                tr.remove();              
            })//!!?          
            text.keydown(function(e){
                switch(e.keyCode) {
                case 13:
                    text.hide();
                    li.text(text.val());
                    li.show();
                    editList.text('edit');
                }
            })
        })
    }
})(jQuery);

Пример использования

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <script type="text/javascript" src="jquery-1.3.2.js"></script>
        <script type="text/javascript" src="jquery.spisok_1.js"></script>
        </head>

<script>
    $(document).ready(function(){
       $('.editable').spisok();              
    });
</script>
    <body>
    <li class="editable" >FIRST</li>
    <li class="editable">SECOND</li>
    <li class = "editable">THIRD</li>   
       </body>
</html>