HTML, CSS and JavaScript playground

function elmt(name, attributes){
    var node = document.createElement(name);

if(attributes){
        for(var attr in attributes)
            if(attributes.hasOwnProperty(attr))
            node.setAttribute(attr,attributes[attr]);
    }
    for(var i = 2; i < arguments.length; i++){
        var child = arguments[i];
        if(typeof child == "string")
            child = document.createTextNode(child);
            node.appendChild(child);
    }
    return node;
}

function addTODOList() {
    var contentBlock = document.querySelector("#contentBlock");
    var div = elmt("div");
    var table = elmt("table");

var input = elmt("input", {type:"text",style:"width:20%; height:2em"});
    var button = elmt("button", {onclick:"addTask()", style:"width:100px; height:40"},"Add task");

contentBlock.appendChild(div).appendChild(input);
    contentBlock.appendChild(div).appendChild(button);
    contentBlock.appendChild(div).appendChild(table);
}

function addTask() {
    var valueOfTask = document.querySelector("input");
    
    var tr = document.createElement('tr');
    tr.className = "row";
    var td0 = document.createElement('td');
    td0.className ="dragHandle";
    var td1 = document.createElement('td');
    var td2 = document.createElement('td');
    td2.className = "context";
    var td3 = document.createElement('td');
    var td4 = document.createElement('td');

var table = document.querySelector("table");
    var checkbox = document.createElement('input');
    checkbox.type = "checkbox";

//delete task
    var deleteTask = document.createElement('button');
    deleteTask.innerHTML = "Delete";
    deleteTask.style.display = "inline-block";
    deleteTask.style.cursor = "pointer";
    deleteTask.onclick = function () {
                $(this).closest('tr').remove();
        };

//edit task
    var edit = document.createElement('button');
    edit.innerHTML = "Edit";
    edit.style.display = "inline-block";
    edit.style.cursor = "pointer";
    edit.onclick = function () {
        //Ð¿Ð¾Ð»ÑƒÑ‡Ð°ÐµÐ¼ Ð´Ð¾ÑÑ‚ÑƒÐ¿ Ðº ÑÑ‡ÐµÐ¹ÐºÐµ
        var accessToValue = $(this).closest('tr').find('td.context');
        //ÐŸÐžÐ›Ð£Ð§ÐÐ•Ðœ Ð¡ÐžÐ”Ð•Ð Ð–Ð˜ÐœÐžÐ• Ð¯Ð§Ð•Ð™ÐšÐ˜
        var val = accessToValue.html();
        var code = '<input type="text" id="edit" value="'+val+'" style="border: none"/>'
        //ÑƒÐ´Ð°Ð»ÑÐµÐ¼ ÑÐ¾Ð´ÐµÑ€Ð¶Ð¸Ð¼Ð¾Ðµ Ð¸ Ð²ÑÑ‚Ð°Ð²Ð»ÑÐµÐ¼ Ð¿Ð¾Ð»Ðµ
        accessToValue.empty().append(code);
        //ÑƒÑÑ‚Ð°Ð½Ð°Ð²Ð»Ð¸Ð²Ð°ÐµÐ¼ Ñ„Ð¾ÐºÑƒÑ Ð½Ð° Ð¿Ð¾Ð»Ðµ
        $('#edit').focus();
        //Ð¿Ñ€ÑÑ‡ÐµÐ¼ Ð¿Ð¾Ð»Ðµ Ð¸ Ð¾Ð±Ð½Ð¾Ð²Ð»ÑÐµÐ¼ Ð´Ð°Ð½Ð½Ñ‹Ðµ
        $('#edit').blur(function () {
            var val =$(this).val();
            accessToValue.html(val);
        });
        $(window).keydown(function (event) {
            if(event.keyCode ==13){
                $('#edit').blur();
            }
        })
    };
    td1 = checkbox;
    td2.innerHTML = valueOfTask.value;
    td3 = edit;
    td4 = deleteTask;

tr.appendChild(td0);
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    tr.appendChild(td4);
    table.appendChild(tr);

$(document).ready(function() {
        $('table').tableDnD({
            dragHandle: ".dragHandle"
        });

$("table tr").hover(function() {
            $(this.cells[0]).addClass('showDragHandle');
        }, function() {
            $(this.cells[0]).removeClass('showDragHandle');
        });
    });
}