Показать и скрыть кнопку ввода в таблице сетки сетки

Question

Я пытаюсь сделать кнопку в таблице сетки сетки, которая говорит редактировать, затем нажмите кнопку «Скрыть правую кнопку» и кнопку «Сохранить». Я попытался использовать jQuery .hide и .show, но они не работают в таблице. Любые советы приветствуются.

<button class="1">edit</button> 
<button class="2">Save</button> 


$(".1").click(function() { 
    $(".1").hide(function){ 
    $(".2").show('fast') 
}); 

<style> 
     .2 { 
     display:none; 
      } 
</style> 

Answer 1

Это именно то, что вы искали?

Working jsFiddle here

HTML:

<table id="mytable"> 
    <tr> 
     <th>First Name</th> 
     <th>Last Name</th> 
    </tr> 
    <tr> 
     <td> 
      <input type="text" class="txt_input" id="fname" /> 
     </td> 
     <td> 
      <input type="text" class="txt_input" id="lname" /> 
     </td> 
    </tr> 
</table> 
<input type="button" id="edbutt" value="Allow Editing" /> 
<input type="button" id="svbutt" class="hidden" value="Save" /> 

JQuery/Javascript

$('.txt_input').prop("disabled", true); 

$('#edbutt').click(function() { 
    $('.txt_input').prop("disabled", false); 
    $('#svbutt').removeClass('hidden'); 
    $(this).addClass('hidden'); 
}); 

$('#svbutt').click(function() { 
    alert('We are saving now'); 
}); 

CSS:

.hidden{display:none;}