Editable table first row text only using jquery

Question

Table first row text editable is not working. I have two button one is edit and another one is cancel. If I click edit button I want to edit first td text with textbox and again if I click save button I want to save that data. If I click cancel button I want to show previous value. I tried but not working. please help.

html:

<table id="tabledata">
<tr>
    <th>RecID</th>
    <th>Col1</th>
    <th>opt</th>
</tr>
<tr>
<td><a><div class="nestedtable"> </div></a>RecID</td>
    <td>Val1.1</td>
    <td><button class="edit">edit</button><button class="">cancel</button></td>
</tr>
<tr>
    <td><a><div class="nestedtable"> </div></a>RecID</td>
    <td>Val2.1</td>
    <td><button class="edit">edit</button><button class="cancel">cancel</button></td>
</tr>
<tr>
    <td><a><div class="nestedtable"> </div></a>RecID</td>
    <td>Val3.1</td>
    <td><button class="edit">edit</button><button class="cancel">cancel</button></td>
</tr>

javascript:

$(function () {
$(".edit").click(function (e) {
    e.preventDefault(); // <-- consume event
    e.stopImmediatePropagation();

    $this = $("#tabledata:first td");

    if ($this.data('editing')) return;  

    var val = $this.text();

    $this.empty()
    $this.data('editing', true);        

    $('<input type="text" class="editfield">').val(val).appendTo($this);

    $this.text("save");
    $this.addclass('savefield')

});

putOldValueBack = function () {
    $("#tabledata .editfield").each(function(){
        $this = $("#tabledata:first td");
        var val = $this.val();
        var td = $this.closest('td');
        td.empty().html(val).data('editing', false);

         $this.text("edit");
         $this.addclass('editfield')


    });
}

$(document).click(function (e) {

   $(".savefield").click(function (e) {
   putOldValueBack();
   });
     $(".cancel").click(function (e) {
      //cancel editable and show previous value show
   });
});
 });

fiddle:http://jsfiddle.net/9KEGd/178/

i want to edit the first row td text . edit and save button as a toggle — saranchel n
– saranchel n, Commented Nov 22, 2017 at 14:10
same like this but edit option only for first row and no need add row option:talkerscode.com/webtricks/demo/… — saranchel n
– saranchel n, Commented Nov 22, 2017 at 14:17

Zach · Accepted Answer · 2017-11-22 15:02:11Z

1

First off, in the fiddle, you were missing the classes on your first row of buttons. Add class='edit' and class='cancel' to get your clicks to work.

However, you are over-complicating this a bit I think so here is a fiddle that is a bit easier to use. This code could be a little more elegant but it should get you closer

http://jsfiddle.net/9KEGd/184/

jQuery

$(function () {
    var currentValue;

    $(".edit").click(function (e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        var btn = $(this);
        var td = btn.closest("tr").find(".editable");
        currentValue = td.text();

        if(btn.text() === "edit")
        {
          td.html("<input type='text' value="+currentValue+" />");
          btn.html("save");
        }
        else
        {
          td.html(td.find("input").val());
          btn.html("edit");
        }
    });

     $(".cancel").click(function (e) {
        e.preventDefault();  
        e.stopImmediatePropagation();
        var td = $(this).closest("tr").find(".editable");
        if(currentValue)
        {
          td.html(currentValue);
          $(this).parent().find(".edit").html("edit");
          currentValue = null;
        }
    });
});

edited Nov 22, 2017 at 15:02

answered Nov 22, 2017 at 14:36

Zach

1,9642 gold badges17 silver badges28 bronze badges

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

4 Comments

saranchel n Over a year ago

I have asked only for first row only. important:editable only td text not for ancher tag . <td><a><div class="nestedtable"> </div></a>RecID</td>

Zach Over a year ago

You changed the eq(0) instead of eq(1) that causes the first column to be edited. Change it back to eq(1) like I had it to edit the second column as you wish

saranchel n Over a year ago

i want to edit only td text after the ancher tag :<td><a><div class="nestedtable"> no need </div></a>edit only this text RecID</td>

Zach Over a year ago

Ahh okay, I got you now. Are you able to edit the html? If so, add a class around the text like this and edit it this way. I have also updated the answer accordingly jsfiddle.net/9KEGd/184

Collectives™ on Stack Overflow

Editable table first row text only using jquery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related