i found nice script in jquery edit contents of table on double click. trying add more functionality table adding button. first function trying add "add". take @ fiddle , things clear
everything seems works ok @ moment. when add row on click of add, not allow me edit contents other rows
html
<table class="editabletable"> <thead> <tr> <th>code</th> <th>name</th> <th>email</th> <th>phone</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>pedro fernandes</td> <td>pedro.ferns@myemail.com</td> <td>(21) 9999-8888</td> </tr> </tbody> </table> <td style="text-align:center;"> <button onclick="addrecord()" >add</button></td> jquery
$(function () { $("td").dblclick(function () { var originalcontent = $(this).text(); $(this).addclass("cellediting"); $(this).html("<input type='text' value='" + originalcontent + "' />"); $(this).children().first().focus(); $(this).children().first().keypress(function (e) { if (e.which == 13) { var newcontent = $(this).val(); $(this).parent().text(newcontent); $(this).parent().removeclass("cellediting"); } }); $(this).children().first().blur(function () { $(this).parent().text(originalcontent); $(this).parent().removeclass("cellediting"); }); }); }); function addrecord(){ $('<tr><td>004</td><td></td><td></td><td></td></tr>').appendto('table'); }
change
$("td").dblclick(function () { to
$(".editabletable").on("dblclick", "td", function () { the difference between 2 former adds event existing tds not add same event on td added dynamically, trying achieve. latter takes care of td added dynamically well.
Comments
Post a Comment