dbclick Edit cell

dblclick Edit cell

by jpeter06

HTML

<table width=100%>
<tbody>
<tr>
  <td class="inner">1</td>
  </tr><tr>
  <td class="inner2">2</td>
   </tr><tr>
  <td class="inner">4</td>
  </tr><tr>
  <td class="inner2">5</td>
</tr>
</tbody>
</table>

CSS

.inner {
    background:#fefefe;
}
.inner2 {
    background:#f1f1f1;
}
input[type="text"] {
     width: 100%; 
     box-sizing: border-box;
     -webkit-box-sizing:border-box;
     -moz-box-sizing: border-box;
}

JavaScript

$(function () {
    $("tbody").dblclick(function (e) {
        e.stopPropagation();
				if(!$(".thVal").length){
          var currentEle = $(e.target);
          var value = currentEle.html();
          updateVal(currentEle, value);
        }
    });
});

function updateVal(currentEle, value) {
    $(document).off('click');
    $(currentEle).html('<input class="thVal" width="100%" type="text" value="' + value + '" />');
    $(".thVal").focus();
    $(".thVal").keyup(function (event) {
        if (event.keyCode == 13) {
            $(currentEle).html($(".thVal").val().trim());
        }
    });

    $(document).click(function (event) {
    console.log('click');
    	if($(".thVal").length && !event.target.classList.contains('thVal'))
            $(currentEle).html($(".thVal").val().trim());
    });
}