顯示和隱藏網格表格中的輸入按鈕

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;}