如何通过单击文本框jQuery使表格可见

Question

I've created a numpad inside the table and setted the table visible false. I want to display the table after user clicked to the textbox. here is the code I wrote;

<div id="divTable"> 
                <table align="center"  runat="server" id="numpadTable" visible="false">
            <tr>
                <td>
                    <asp:Button ID="Button1" runat="server" Text="1" OnClick="Button1_Click" CssClass="btnNumpad" /></td>
                <td class="auto-style2">
                    <asp:Button ID="Button2" runat="server" Text="2" OnClick="Button2_Click" CssClass="btnNumpad" /></td>
                <td>
                    <asp:Button ID="Button3" runat="server" Text="3" OnClick="Button3_Click" CssClass="btnNumpad" /></td>
            </tr></table></div>

textbox id= "numpadID";

I have found such codes to do that but I failed. For example;

<script>
$(document).ready(function() {
    $('#numpadID').live('click', function(event) {

        $('#numpadTable').toggle('show');

    });
});
</script>

It doesnt work. Any help?

Answer 1

Instead of live use 'on'

$(document).ready(function() {
    $('#numpadID').on('click', function(event) {

        $('#numpadTable').toggle('show');

    });
});

Update Use This :-

$(document).ready(function() {
    $('#numpadID').on('click', function(event) {

        $('#numpadTable').fadeIn();

    });
});

Answer 2

As you are using ASP.NET, numpadID is a server control(as you are using runat="server" ) you need to use Control.ClientID . <%= numpadID.ClientID %> will Gets the control ID for HTML markup that is generated by ASP.NET.

Use

$("#<%= numpadID.ClientID %>").on('click', function () {
    $("#<%= numpadTable.ClientID %>").toggle('show');
});

OR

You can use ClientIDMode.Static mode then you can continue with your existing code. However I will not recommend it.

---

As of jQuery 1.7 , the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live()

Answer 3

You can use this code to show and hide the table.

$("#<%= numpadID.ClientID %>").focus(function () {
    $("#numpadTable").attr('visible','true');
});