Making row editable when hit row edit button

Your code with the button click is too complicated. I have reduced it by making it easier to understand.

  $(document).ready(function () {
      $('.editbtn').click(function () {
          var currentTD = $(this).parents('tr').find('td');
          if ($(this).html() == 'Edit') {                  
              $.each(currentTD, function () {
                  $(this).prop('contenteditable', true)
              });
          } else {
             $.each(currentTD, function () {
                  $(this).prop('contenteditable', false)
              });
          }

          $(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit')

      });

  });

Code Explained:

1) Get all the tds within tr using below code

var currentTD = $(this).parents('tr').find('td');   

2) Then as usual iterate through each tds and change its contenteditable property like below

$.each(currentTD, function () {
                      $(this).prop('contenteditable', true)
                  });

Updated JSFiddle

Try this:

$('.editbtn').click(function() {
    var $this = $(this);
    var tds = $this.closest('tr').find('td').filter(function() {
        return $(this).find('.editbtn').length === 0;
    });
    if ($this.html() === 'Edit') {
        $this.html('Save');
        tds.prop('contenteditable', true);
    } else {
        $this.html('Edit');
        tds.prop('contenteditable', false);
    }
});

jsFiddle