在Web网格表中显示和隐藏输入按钮

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