CODEWITHSUNDEEP
javascriptasp.netjqueryhtmlshow-hide
Hotmoil
Hotmoil

Reputation: 633

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

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 ?

Upvotes: 3

Views: 7353

Answers (5)

Clem
Clem

Reputation: 69

This does not work with a table in Jquery or javascript. You have to reference a table by class or some other id. Using element ID does not work with tables.

Upvotes: 0

Amr Badawy
Amr Badawy

Reputation: 7673

I think you have the same problem as in this post JQuery .Show() doesn't work with server control?

Upvotes: 1

Garis M Suero
Garis M Suero

Reputation: 8170

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

Upvotes: 0

whall
whall

Reputation: 21

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.

Upvotes: 0

tom
tom

Reputation: 8359

If I do this onload it works

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

Maybe your problem lies somewhere else?

Upvotes: 1

Related Questions