Adding a record to HTML table using Jquery

Question

I found this very nice script in jquery to edit the contents of a table on double click. Now i am trying to add more functionality to the table by adding button. The first function i am trying to add is "add". Take a look at my fiddle and things will be clear

Everything seems to works ok at this moment. However when I add a row on click of add, it does not allow me to edit the contents like the 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>[email protected]</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');     
}

mohkhan · Accepted Answer · 2013-07-19 12:00:48Z

4

Change

$("td").dblclick(function () {

to

$(".editableTable").on("dblclick", "td", function () {

The difference between the two is that the former adds the event to the existing TDs but will not add the same event on any TD added dynamically, which you are trying to achieve. The latter however takes care of any TD added dynamically as well.

answered Jul 19, 2013 at 12:00

mohkhan

12.3k2 gold badges27 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tro · Accepted Answer · 2013-07-19 12:04:00Z

The code to make it double-clickable only runs at the start, so that code will not apply to any new rows you create. A really dirty hack is to just copy the code into your function, although there is bound to be other ways.

    function addrecord(){
      $('<tr><td>004</td><td></td><td></td><td></td></tr>').appendTo('table');     
      $("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");
        });
    });
}

Cjxcz Odjcayrwl · Accepted Answer · 2013-07-19 12:04:36Z

0

OK you have static table, you register event listener on each td, and then you add new row. Of course there's no click listener in that point. You need to register listener after creating new row:

var row = $('<tr><td>004</td><td></td><td></td><td></td></tr>');
row.find("td").dblclick(mylistener)
row.appendTo('table');

answered Jul 19, 2013 at 12:04

Cjxcz Odjcayrwl

23k44 gold badges150 silver badges232 bronze badges

Comments

Wang'l Pakhrin · Accepted Answer · 2013-07-19 12:13:46Z

0

use on() , as live() is depriciated

answered Jul 19, 2013 at 12:13

Wang'l Pakhrin

8683 gold badges16 silver badges31 bronze badges

Comments

Christian Kellner · Accepted Answer · 2013-07-19 12:01:06Z

-1

.live will do the trick..

$(function () {
$("td").live("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');     
}

answered Jul 19, 2013 at 12:01

Christian Kellner

7,41712 gold badges58 silver badges91 bronze badges

3 Comments

Spokey Over a year ago

use .on() with the newer versions of jQuery as .live() was removed from them

Christian Kellner Over a year ago

does it work like .live did?`I mead does it also match for elements whcih will be added later on?

Spokey Over a year ago

Yes, look at mohkhans answer, if given the right parameters it will work for dynamically added elements. api.jquery.com/on

Collectives™ on Stack Overflow

Adding a record to HTML table using Jquery

5 Answers 5

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related