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

时间:2013-08-29 19:00:58

标签: jquery css webgrid

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

1 个答案:

答案 0 :(得分:0)

这是你想要的那种东西吗?

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