Why i can't show/hide Html TR using jquery ?

Question

I have the following TR in HTML and i using JQuery

<tr class="RowDiv" id="tempTR" runat="server" visible="false">                    <td>
                    <div class="LabelDiv">
                        <div class="dfltTxtBld">
                            ID<span class="reqChar" runat="server" id="Span1" visible="false">
                                *</span>
                        </div>
                    </div>
                </td>
                <td>
                    <div class="InputDiv">
                        <asp:TextBox ID="TextBox1" runat="server" CssClass="txtField" MaxLength="10"></asp:TextBox>
                    </div>
                </td>
                <td>
                    <div id="Div1" runat="server">
                    </div>
                </td>
            </tr>

and in javascript code i called the following method to hide it

$('#<%= tempTR.ClientID %>').hide();

but always it doesn't affected even i try to make it hidden and then show it also not work .. i try to hide & show TextBox1 and it work but if i try with the row it doesn't work ... is there any way to show/hide TR ?

Answer 1

If I do this onload it works

$(document).ready(function(){
    $('#tempTR').hide();
});

Maybe your problem lies somewhere else?

Answer 2

In your example, the textbox works because it is an asp control and the table row doesn't because it is a HTML element.

Look at the actual HTML and make sure that $('#<%= tempTR.ClientID %>').hide(); resolves to $('#tempTR').hide(); in the rendered HTML.

I haven't used ASP in awhile, but I believe it will be render as $('#tempTR.ClientID') which isn't an ID in the DOM.

Answer 3

I prefer, As a you just clicked on an element inside the TR you want to hide, i will use:

$('#other').click(function() {
    $(this).closest("tr").hide();
});

with some effect:

$('#other').click(function() {
   $(this).closest("tr").fadeOut('slow');
});

remember to put that code in your onready function

$(document).ready(function($) {
  // Code using $ as usual goes here.
});