Question

我有2行的表。行包含文本框和提交按钮。

问题：

当用户单击文本框时，应该显示提交按钮。我该怎么做。我尝试使用最接近的功能，但它不起作用。

HTML代码

<table id="table1">
    <tr><td><input type="text"/></td><td><input type="submit" value="validate" style="display:none"/></td></tr>
    <tr><td><input type="text"/></td><td><input type="submit" value="validate" style="display:none"/></td></tr>
</table>

JQuery的

（文档）$。就绪（函数（）{

    $( "#table1" ).on( "click", "input:text", function( event ) {
        var parent = $(this).closest('td').show();
        alert('Clicked')
    })

}）

http://jsfiddle.net/92HHG/1/

Answer 1

此处您可以使用closest()定位 td 然后导航到下一个 td 并找到提交按钮

$(this).closest('td').next('td').find(':submit').show();

DEMO

OR

此处您可以使用closest()定位 tr ，然后找到提交按钮

$(this).closest('tr').find(':submit').show();

DEMO 2

Answer 2

$(document).ready(function(){

        $( "#table1" ).on( "click", "input:text", function( event ) {
           $('input[type=submit]').hide();
           $button =  $(this).parent().next().find('input');

           $button.show();


        })

})

这是最好的解决方案：D

Answer 3

一种方法是$(this).parents('tr:eq(0)').find('[type=submit]').show();

找到文本框的第一个父tr，然后找到子提交。

或者你可以$(this).parent().next()来获得下一个td

Answer 4

你去了：

        $(this).closest("tr").find("input[type=submit]").show();

Answer 5

稍微不同的方法，以响应那些不喜欢表格布局的人。只是一种关于“显示”按钮的不同方法。

我使用过“.blur”，但你会使用.focus，.click，无论你想要什么。

FIDDLE

HTML

<div class='holderdiv'>
  <div><input id='upperin' type="text"/><input type="submit" value="Validate" id='upperbutton'/></div>
  <div><input id='lowerin' type="text"/><input type="submit" value="Validate" id='lowerbutton'/></div>
</div>

JS

$('#upperin').blur(function(){
       $('#upperbutton').css('visibility', 'visible');
});
$('#lowerin').blur(function(){
       $('#lowerbutton').css('visibility', 'visible');
});

表格中的不可见/可见提交按钮

5 个答案: