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

Question

我正在尝试在 Web 网格表中创建一个显示编辑的按钮，然后单击隐藏编辑按钮并显示保存按钮我尝试了 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

这是你要找的那种东西吗？

在这里工作 jsFiddle

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