CODEWITHSUNDEEP
jqueryasp.netcss
Andreas Eriksson
Andreas Eriksson

Reputation: 9027

Hiding and showing tablerow elements with jquery

I have a simple function that shows and hides elements if a user clicks a link.

It's currently set up as such: 

$('div.box table a').click(function (e) {

    stopEvent(e);
    var self = $(this);

    if ($("#" + self.text()).css('display', 'none')) {
        $("#" + self.text()).show('slow');

        return;
    }
    else if ($("#" + self.text()).css('display', 'table-row')) {
        $("#" + self.text()).hide();

        return;
    }

});

So basically, if the user clicks a link, i get the tablerow that has the ID which is the text of the link. I also check the "display"-tag of the tr to determine whether i should show or hide.

Sadly, it's buggy as all hell and hiding doesn't work.

Thankful for any help!

Edit: Html part, as requested:

        <%  bool even = true;
            foreach (var item in ViewBag.NefList)
          {%>
                <tr <%: even? "class=even" : "" %>>
                    <td><%: Html.ActionLink(item.Artno, "action", new { artno = item.Artno, week = ViewBag.Week, projectID = item.projectID  })%></td>
                    <td><%: item.projectName%></td>
                    <td><%: item.qty%></td>
                    <td><%: item.totalStock%></td>
                    <td><%: item.Description%></td>
                </tr>
                <tr <%: even? "class=even" : "" %> style="display: none" id ="<%: item.Artno %>"> <td>Hello</td></tr>
         <% even = !even;
          } %>   
</table>

Upvotes: 2

Views: 1127

Answers (3)

sharat87
sharat87

Reputation: 7536

Use

if ($("#" + self.text()).is(':visible')) {

to check if an element is visible or not. And act accordingly.

On a similar note, you may use .toggle() method to show/hide elements with jQuery.

Upvotes: 0

wewals
wewals

Reputation: 1447

You have an error in your check to determine if the element is visible. The toggle method will take care of this for you.

$('div.box table a').click(function (e) {
    var self = $(this);
    e.preventDefault

    $("#" self.text()).toggle('slow');
});

Upvotes: 2

Jayantha Lal Sirisena
Jayantha Lal Sirisena

Reputation: 21376

Try this,

  else if ($("#" + self.text()).css('display', 'block')) {
            $("#" + self.text()).hide();

            return;
        }

Upvotes: 0

Related Questions