javascript - Why i can't showhide Html TR using jquery? - Stack Overflow

admin管理员组

文章数量:1394185

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 ?

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 ?

• javascript
• asp
• jquery
• html
• show-hide

Share Improve this question Follow edited Sep 5, 2010 at 14:36 Lukman 19.2k77 gold badges5959 silver badges6868 bronze badges asked Sep 5, 2010 at 10:24 HotmoilHotmoil 63311 gold badge77 silver badges1515 bronze badges 8

• is the id TempTR unique? – Marko Commented Sep 5, 2010 at 10:27
• It works: jsfiddle/3edjh – aularon Commented Sep 5, 2010 at 10:33
• I updated the code with the real case that generate prblem – Hotmoil Commented Sep 5, 2010 at 10:42
• @Hotmoil - Is the extra ' a posting typo? It shouldn't pile with that in there. – Nick Craver Commented Sep 5, 2010 at 10:43
• @Nick not it was mistake from me here and i fix it .. it's not the problem – Hotmoil Commented Sep 5, 2010 at 10:45

 |  Show 3 more ments

5 Answers 5

Sorted by: Reset to default 1

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

If I do this onload it works

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

Maybe your problem lies somewhere else?

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.

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

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.

本文标签： javascriptWhy i can39t showhide Html TR using jqueryStack Overflow