如何使用jquery使按钮显示为一行

时间:2014-02-20 10:19:17

标签: jquery html5 laravel

我正在使用laravel在数据库中显示屏幕上的用户。

我在表中显示用户,其中每个用户都是一个表行。每个表格行也是一个单独的表格。我希望管理员能够分开保存每一行。

USERNAME       FIRSTNAME      LAST NAME    SAVE BUTTON
--------------------------------------------------------
[username]    [first name]   [last name]  [ save button]
[ username2]  [firstname]    [last name]  [ save button]

所以我做了一个名为'rowsaver'的课程。行中的每个元素都有这个类。保存按钮的类别为“btnvanish”。在文档就绪时,我隐藏了保存按钮:

$('.btnvanish').hide();


$('.rowsaver').on('change',function() {
    $('.btnvanish').show();

});

当文本字段中的元素被更改时,弹出保存按钮(在行的末尾)。唯一的问题是每行的每个保存按钮都会弹出。

我希望保存按钮仅弹出文本字段更改的行。有谁知道我怎么能做到这一点?

这是我的一个表行:

 <tr>
   {{Form::open(array('url' => 'KSMschema')) }}
   <td> {{Form::textarea('Werkwijze',$user->Werkwijze, array('style' => 'height: 30px; overflow: hidden', 'class' => 'form-control textbox rowsaver')) }} </td>
   <td> {{Form::textarea('Werkwijze',$user->Werkwijze, array('style' => 'height: 30px; overflow: hidden', 'class' => 'form-control textbox rowsaver')) }} </td>
   <td>{{Form::submit('Opslaan', array('class' => 'btn btn-primary btnvanish'))}}</td>
   {{Form::close()}}
</tr>

...

1 个答案:

答案 0 :(得分:1)

我的代码可能不完美,因为我没有看到你的HTML,但一般来说你需要根据改变的行找到按钮:

$('.rowsaver').on('change',function() {
    $(this).closest('tr').find('.btnvanish').show();
});

因为它基于猜测很少解释:

this - 输入已更改

.closest('tr') - 我相信你的行被放在tr中,所以找到正确的行

.find('.btnvanish').show() - 在挑选的行中找到按钮并显示

我希望你能得到这个想法,或者你可以发布html,我们可以帮助你提供更准确的答案。