Segmentar um de seus pais com atributos de dados usando jquery

Estou desenvolvendo um recurso de tabela editável como descrito em uma postagem anterior: Linha editável em uma tabela – está usando o ID do registro em uma prática ruim do elemento

?

Eu tenho a seguinte marcação:

 Foo    Bar   

Usando jquery, consegui descobrir qual linha estou editando, direcionando o .editBtn e, em seguida, usando o seguinte para descobrir qual é o elemento data-id :

 $('.editBtn').click(function() { id = ($(this).closest('tr').data('id')); console.log(id); }); 

O que eu não entendo é dado este ID como posso, então, direcionar o elemento td que tem o nome da minha categoria nele (Foo e Bar, neste exemplo)?

Eu quero ser capaz de levar o conteúdo neles e colocá-los em um campo editável assim:

  

Eu também preciso poder alterar o botão ‘Editar’ para um botão ‘Salvar’ neste ponto, com um nome de class diferente, por exemplo

  

Como posso fazer isso?

Você pode usar find() junto com :first (ou :eq(0) ) para obter o primeiro td dentro da linha. Você também pode alterar o texto e a class do botão clicado usando text() e addClass() respectivamente. Finalmente, você pode colocar o conteúdo em uma input , anexando-o ao td . Tente isto:

 $('.editBtn').click(function() { var $button = $(this).addClass('save').text('Save'); var $tr = $button.closest('tr'); var id = $tr.data('id'); var $td = $tr.find('td:first'); $td.html(''); }); 
  
Foo
Bar