editable td in table

by J. Jones

HTML

<table style="width:98%;" cellpadding="0" cellspacing="0" class="doodleTable">
    <th>
        <tr>
            <td>Title</td>
            <td>Description</td>
        </tr>
    </th>
    <tr>
        <td class="doodleEdit "></td>
        <td class="doodleEdit ">...</td>
    </tr>
    <tr>
        <td class="doodleEdit ">...</td>
        <td class="doodleEdit ">...</td>
    </tr>
</table>

CSS

.doodleTable {
       border-top: 1px solid black;
       border-left: 1px solid black;
   }
   .doodleTable td {
       border-bottom: 1px solid black;
       border-right: 1px solid black;
   }
   .doodleTable tr {
   }
   .tdEditVal {
       width:99%;
   }

JavaScript

$(function () {
    $(".doodleEdit").dblclick(function (e) {
        e.stopPropagation();
        var currentEle = $(e.target);
        var value = $(e.target).html();

        console.log($(e.target));

        if ($.trim(value) === "") {
            $(currentEle).data('mode', 'add');
        } else {
            $(currentEle).data('mode', 'edit');
        }
        updateVal(currentEle, value);
    });
});

function updateVal(currentEle, value) {
    $(currentEle).html('<input class="tdEditVal" type="text" value="' + value + '" />');
    var mode = $(currentEle).data('mode');
    $(".tdEditVal").focus();
    $(".tdEditVal").keyup(function (event) {
        if (event.keyCode == 13) {
            $(this).parent().html($(this).val().trim());
            $(".tdEditVal").remove();
        }
    });
}

$(document).click(function (e) {
    if ($(".tdEditVal") !== undefined) {
        if ($(".tdEditVal").val() !== undefined) {
            $(".tdEditVal").parent().html($(".tdEditVal").val().trim());
            $(".tdEditVal").remove();
        }
    }
});