javascript - 如何使用 jQuery 隐藏表格行?

标签 javascript jquery hide

我正在尝试使用 jQuery 而不是使用 js 隐藏表格行 in this question 。这是我放在标题中的脚本:

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

这不起作用。而这个问题是same as this但我无法让我的工作发挥作用。我做错了什么?

更新

根据答案编辑代码。但这仍然不起作用,尽管它在 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>
 ...

更新

结束</script> 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>""")    

最佳答案

首先,你有false作为class在你的 HTML 中

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

和一个ID在你的脚本中

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

您的hide也是 id应该是class .

修复方法如下: http://jsfiddle.net/A6jKm/1/


编辑

now it hides the entire table

这是因为您的所有行都是使用相同的 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/


编辑2

也许closest效果会更好。

试试这个

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

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

关于javascript - 如何使用 jQuery 隐藏表格行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7694560/

相关文章:

jquery - 如果 javascript 关闭,则可以显示/隐藏

javascript - Mocha 测试使用 superagent + promises 超时而不是失败并返回 'expect'

iphone - 当用户做出选择时如何隐藏 UIPickerView

javascript - 如何在 define 函数中获取全局范围?

jquery - 我如何确定脚本是否正在使用 jQuery 在 Ajax 中加载?

javascript - 悬停时显示隐藏的 div

jquery - 表排序器 : how to ignore text in cells

jQuery 删除除特定 ID 之外的类元素

javascript - 如何在 HTML 输入中添加 "ok"按钮?

javascript - 通过 Controller 设置默认顺序