Inline Edit with Add Row

by kidino

HTML

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<button>Add Row</button>

CSS

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
li {
    margin-bottom: 5px;
    padding: 3px 5px;
    background-color: #f0f0f0;
    height: 26px;
}
input {
    height: 20px;
    width:100%;
}

JavaScript

(function ($) {

    $.fn.inlinego = function (options) {

            var t = $(this).get(0).tagName;
            $(this).parent().on('click', t, function () {
                var v = $(this).text();            
                var inp = $("<input type='text'>");
                inp.val(v);
                $(this).html('');
                inp.appendTo($(this)).focus();
            });

            $(this).parent().on('blur', t+' input', function () {
                var v = $(this).val();
                if (v.trim() == "") {
                    alert('Field cannot be empty');
                    $(this).focus();
                } else {
                    $(this).parent().append(v);
                    $(this).remove();
                }
            });

            $(this).parent().on('keyup', t+' input', function (e) {
                if (e.which == 13) {
                    $(this).blur();
                }
            });
        
        

        };


}(jQuery));

$(document).ready(function () {

    $('li').inlinego();
    $('button').click(function(){
        $('ul').append('<li>New Row</li>');
    });
});