如何用jQuery隐藏表行？ [英] How to hide a table row with jQuery?
问题描述
我试图用jQuery而不是js隐藏表行在这个问题中。这是我放在标题中的脚本：
I am trying to hide a table row with jQuery instead of with js as in this question. 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>
""")
这里是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?
更新
根据答案编辑代码。但是这仍然没有用，虽然它在jsfiddle中工作：
Edited code according to answers. But this is still not working although it is working 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>
...
更新
CDN通话中缺少结束< / script> ;但现在整个表都被隐藏了;我正在添加该表的那一部分。再次感谢您的回答：
The closing </script> was missing in the CDN call; 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>""")
推荐答案
首先，你有 false 作为类在你的HTML中
First thing, you have false as a class in your HTML
< a class =falsehref = ...
和脚本中的 ID
$（＃false）。click（function（）...
你的隐藏也是一个 id ，应该是 class 。
Your hide is also an id and should be class.
以下是修复： http://jsfiddle.net/A6jKm/1 /
编辑
n它隐藏了整个表
now it hides the entire table
这是因为所有行都是使用相同的生成隐藏 class，如此处所示
That's because all your rows are generated with the same hide class, as seen here
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();
});
更新示例： http://jsfiddle.net/A6jKm/3/
编辑2
或许最近的会更好。
试试这个
$("a.false").click(function(e){
$(this).closest('tr.hide').hide();
e.preventDefault();
});
示例3： http://jsfiddle.net/A6jKm/4/
这篇关于如何用jQuery隐藏表行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
