如何使用 jQuery 隐藏表格行？

发布于 2024-12-08 16:05:14 字数 3334 浏览 0 评论 0原文

我试图用 jQuery 而不是用 js 隐藏表行在此问题中。这是我放在标题中的脚本：

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>
...

这不起作用。这个问题与此相同，但我无法提出我的问题工作。我做错了什么？

更新

根据答案编辑代码。但这仍然不起作用，尽管它在 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 调用中缺少结束；但现在整个表都被隐藏了；我正在添加表格的该部分。再次感谢各位的解答：

    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>""")

原文

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>
""")

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 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:

         <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; 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>""")

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

葮薆情 2024-12-15 16:05:14

首先，您将 false 作为 HTML

中的 class

和 >脚本中的 ID

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

您的 hide 也是一个 id 并且应该是 class。

这是修复方法： http://jsfiddle.net/A6jKm/1/

编辑

现在它隐藏了整个表格

这是因为所有行都是使用相同的 hide 类生成的，如此处所示

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

为了解决这个问题，我对代码进行了一些修改以搜索单击的项目：

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

更新示例： http://jsfiddle.net/A6jKm/3/< /a>

编辑2

也许最接近会更好。

试试这个

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

示例 3： http://jsfiddle.net/A6jKm/4/

First thing, you have false as a class in your HTML

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

and an ID in your script

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

Your hide is also an id and should be class.

Here is the fix: 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

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/

EDIT 2

Perhaps closest would work better.

Try this

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

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

回复收藏 0 原文

如此安好 2024-12-15 16:05:14

您正在使用 ID 选择器：

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

当您需要类选择器时：

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

演示： http://jsfiddle.net/ambigously/ sw7Tr/

You're using ID selectors:

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

when you want a class selectors:

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

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

回复收藏 0 原文

~没有更多了~

关于作者

总攻大人

暂无简介

0 文章

0 评论

24 人气

关注发私信

胡图图

文章 0 评论 0

关注

zt006

文章 0 评论 0

关注

z祗昰~

文章 0 评论 0

关注

冰葑

文章 0 评论 0

关注

野の

文章 0 评论 0

关注

天空

文章 0 评论 0

友情链接

文江博客

如何使用 jQuery 隐藏表格行？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如何使用 jQuery 隐藏表格行？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。