Show and hide an input button in web grid table

Question

I am trying to make a button in a web grid table that says edit, then on click hide edit button and show save button I have tried jQuery .hide and .show but they don't appear to work in a table. Any advice welcome.

<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

Is this the sort of thing you were looking for?

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