[英]How to hide a table row with jQuery?
I am trying to hide a table row with jQuery instead of with js as in this question . 我正在尝试使用jQuery而不是js隐藏此问题中的表行。 This is the script that I put 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: 这是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 is not working. 这是行不通的。 And this question is same as this but I cannot make mine work.
这个问题与此相同,但是我不能让我的工作正常。 What am I doing wrong?
我究竟做错了什么?
Update 更新
Edited code according to answers. 根据答案编辑代码。 But this is still not working although it is working in jsfiddle:
但这虽然在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 更新
The closing </script>
was missing in the CDN call; CDN呼叫中缺少
</script>
结束符; but now the entire table is hidden; 但是现在整个表都隐藏了; I am adding that 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>""")
First thing, you have false
as a class
in your HTML 首先,HTML中的
class
为false
<a class="false" href=...
and an ID
in your script 和脚本中的
ID
$("#false").click(function()...
Your hide
is also an id
and should be class
. 您的
hide
也是id
,应该是class
。
Here is the fix: http://jsfiddle.net/A6jKm/1/ 解决方法如下: http : //jsfiddle.net/A6jKm/1/
EDIT 编辑
now it hides the entire table
现在它隐藏了整个桌子
That's because all your rows are generated with the same hide
class, as seen here 这是因为您的所有行都是使用相同的
hide
类生成的,如此处所示
for item in e:
main_id = item.key().id()
self.response.out.write("""
<tr class="hide">
To get around this, I've modified the code a bit to search for the direct parent of the clicked item: 为了解决这个问题,我对代码做了一些修改,以搜索被单击项的直接父项:
$("a.false").click(function(e){
$(this).parents('tr').hide();
e.preventDefault();
});
Updated Example: http://jsfiddle.net/A6jKm/3/ 更新的示例: http : //jsfiddle.net/A6jKm/3/
EDIT 2 编辑2
Perhaps closest
would work better. 也许
closest
会更好。
Try this 尝试这个
$("a.false").click(function(e){
$(this).closest('tr.hide').hide();
e.preventDefault();
});
Example 3: http://jsfiddle.net/A6jKm/4/ 范例3: http : //jsfiddle.net/A6jKm/4/
You're using ID selectors: 您正在使用ID选择器:
$("#false").click(function() {
$("#hide").hide("slow");
});
when you want a class selectors: 当您想要一个类选择器时:
$(".false").click(function() {
$(".hide").hide("slow");
});
Demo: http://jsfiddle.net/ambiguous/sw7Tr/ 演示: http : //jsfiddle.net/ambiguous/sw7Tr/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.