Geek Answers Handbook

How to hide table row using jQuery?

I am trying to hide a table row with jQuery instead of js as in this question . This is the script I entered in the header:

self.response.out.write(""" <html> <head> <link type="text/css" rel="stylesheet" href="/stylesheets/main.css" /> <title>User Admin Page</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> <script> $(document).ready(function() { $("#false").click(function() { $("#hide").hide("slow"); }); }); </script> <body> """)

And here is the html:

 ... <tr class="hide"> <td> ... <a class="false" href="/useradminpage?main_id=%s&display=false"><span class="small">(hide)</span></a> </td> </tr> </div> ...

This does not work. And this question is the same as this one, but I can’t do my job. What am I doing wrong?

Update

Edited code according to answers. But this still does not work, although it works in jsfiddle:

  <html><head> <link type="text/css" rel="stylesheet" href="/stylesheets/main.css" /> <title>User Admin Page</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> <script> $(document).ready(function() { $("a.false").click(function(e) { $(".hide").hide("slow"); e.preventDefault(); }); }); </script> </head> <body> ...

Update

Closing </script> missing in the CDN call; but now the whole table is hidden; I am adding this section of the table. Thanks again for the answers:

  self.response.out.write("""<table class="mytable"> <tr class="head"> <th width="80%">links</th><th>edit tags</th> </tr> """) query = Main.all() query.filter("owner", user) query.filter("display", True) query.order("-date") cursor = self.request.get("cursor") if cursor: query.with_cursor(cursor) e = query.fetch(100) cursor = query.cursor() for item in e: main_id = item.key().id() self.response.out.write(""" <tr class="hide"> <td><a href="%s" target="_blank">%s</a><span class=small> (%s) </span><br /> <span class=small>%s</span> <a href="/edit?main_id=%s"><span class="small">(edit)</span></a> <a class="false" href="/useradminpage?main_id=%s&display=false"><span class="small">(hide)</span></a> <a href="/comment?main_id=%s"><span class="small">(comments)</span></a></td> <td><a href="/tc?url=%s&main_id=%s&user_tag_list=%s" title="edit tags">%s</a> </td> </tr> """ % tuple([item.url, item.title, urlparse(item.url).netloc, f1.truncate_at_space(item.pitch), main_id, main_id, main_id, item.url, main_id, (", ".join(item.tag_list)), (", ".join(item.tag_list)),])) self.response.out.write("""</tbody></table>""")
+2
source share
2 answers

First, you have false as class in your HTML

<a class="false" href=...

and ID in the script

$("#false").click(function()...

Your hide also an ID and must be a class .

Here is the fix: http://jsfiddle.net/A6jKm/1/

EDIT

now it hides the whole table

This is because all of your lines are generated with the same hide class as shown here

 for item in e: main_id = item.key().id() self.response.out.write(""" <tr class="hide">

To get around this, I slightly modified the code to look for the direct parent of the clicked element:

 $("a.false").click(function(e){ $(this).parents('tr').hide(); e.preventDefault(); });

Updated example: http://jsfiddle.net/A6jKm/3/

EDIT 2

Perhaps closest will work better.

try it

 $("a.false").click(function(e){ $(this).closest('tr.hide').hide(); e.preventDefault(); });

Example 3: http://jsfiddle.net/A6jKm/4/

+3
source

You are using the ID selector:

 $("#false").click(function() { $("#hide").hide("slow"); });

when you want to select the class selector:

 $(".false").click(function() { $(".hide").hide("slow"); });

Demo: http://jsfiddle.net/ambiguous/sw7Tr/

+1
source

More articles:


All Articles