toDoList Part1

by Joe Saad

HTML

<input type="text" />


<table border="1" width="100%">
    <tbody>
        <tr>
            <td><input type="checkbox" /></td>
                <td><input type="text" /></td>
            <td><a href="#" class="delete">Delete</a></td>
        </tr>
    </tbody>
</table>

CSS

/*input {border: none; border-bottom: 1px solid #ccc; float: left;} */

input[type="checkbox"] {clear:both;}
table {border:1px solid red ;}
input[type="checkbox"]{display:none}

JavaScript

//  $('input').focus();
/*
    $('body').on("blur", 'input[type="text"]' ,function(){
        $(this).before('<input type="checkbox">');
        $(this).after('<br /><input type="text" />');
        $(this).next('input:text').focus();
        $(this).next('input[type="text"]').focus();
        
    });
*/


$('table').on("blur","input:text", function(){
    
    $(this).closest('tr').clone().appendTo('table');
    $(this).closest('tr').next('tr').find(':checkbox').hide();
    $(this).closest('tr').find(':checkbox').show();
    $(this).closest('tr').next('tr').find(':text').val('').focus();
        
    
    
});

$('table').on("click",".delete", function(e){
    e.preventDefault();
    e.stopPropagation();
    $(this).closest('tr').remove();
    
});

$('table').on("keypress","input:text",function(e){
 if (e.keyCode == 13) {
        $(this).closest('tr').clone().appendTo('table');
        $(this).closest('tr').next('tr').find(':checkbox').hide();
        $(this).closest('tr').find(':checkbox').show();
        $(this).closest('tr').next('tr').find(':text').val('').focus();
   }

});