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

【问题标题】：Show and hide an input button in web grid table在 Web 网格表中显示和隐藏输入按钮
【发布时间】：2013-09-02 08:46:23
【问题描述】：

我正在尝试在 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>

【问题讨论】：

请发布您尝试过的代码示例。

标签： jquery css webgrid

【解决方案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;}

【讨论】：

是的，这是我之后的效果，但我无法让它在表格行中工作
我错过了一些重要的东西我的班级名称有逗号而不是句号谢谢你的帮助！
很高兴为您提供帮助。祝你项目的其余部分好运。