如何隐藏一行表（或列表项）并更新数据存储区而不重新加载页面？ [英] How to hide a row of table (or a list item) and update the datastore without reloading the page?

问题描述

我有一个在桌面上显示的书签列表。我添加了一个隐藏链接来隐藏我不想在列表中看到的书签，但我仍然想保留（仅当您登录时才显示表和隐藏链接）。

I have a list of bookmarks displayed on a table. I added a "hide" link to hide a bookmark that I don't want to see on the list but I still want to keep (table and the hide link show only if you are logged in).

现在我通过从数据库中获取项目并将其display属性更改为False并再次渲染页面来实现。

Now I do it by getting the item from the database and by changing its "display" property to "False" and by rendering the page again.

我认为可以使用javascript更好地完成此操作而无需重新加载页面。我找到了几个引用来隐藏表的一行，但不仅仅是隐藏我还需要将新的display属性写入数据库。我不明白我怎么能这样做。隐藏行并将新显示属性写入数据库的最佳方法是什么？谢谢。

I think this can better be done with javascript without reloading the page. I found several references to hide a row of a table but more than hiding I also need to write the new display property to the database. I don't understand how I can do this. What is the best way to do hide the row and write new display property to the database? Thanks.

这是我现在的代码：

#-----------main table------------#
            display = self.request.get("display")
            main_id = self.request.get("main_id")

            self.response.out.write("""<table class="mytable">
            <tr class="head">
            <th  width="80%">links</th><th>edit tags</th>
            </tr>    
            """)        

            if display == "false":
                k = Main.get_by_id(int(main_id))
                k.display = False
                k.put()
                self.redirect("/useradminpage")

            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>
                    <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 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><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("""</table>""")    

更新

在 style.display .com / questions / 7669256 / how-to-hide-a-row-of-table-or-a-list-item-and-update-the-datastore-without-relo / 7669753＃7669753> RobG的回答;但以下代码不起作用：

Trying style.display in RobG's answer; but the following code does not work:

...
    for item in e:
        main_id = item.key().id()
        self.response.out.write("""
            <div>
            <tr>
            <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 href="/useradminpage?main_id=%s&display=false" onclick="this.parentNode.style.display = "none";><span class="small">(hide)</span></a>
            <a href="/comment?main_id=%s"><span class="small">(comments)</span></a>
            <td><a href="/tc?url=%s&main_id=%s&user_tag_list=%s" title="edit tags">%s</a></td>
            </tr>
            </div>

...

更新

尝试 RobG编辑的答案。在这种情况下，当我单击隐藏按钮时，该行被隐藏片刻然后它再次返回。我不明白为什么。我在下面粘贴代码，包括持有表：

Trying RobG's edited answer. In this case, when I click the hide button, the row is hidden for a moment and then it is back again. I don't understand why. I paste below the code including the holding table:

#-----------holding table start--------#
            self.response.out.write("""
            <table border="0" cellpadding="5" cellspacing="10" >
            <tbody>
            <tr>
            <td>""")
            self.response.out.write("""<td style="vertical-align:top">""")
#-----------tags table start--------#                                   
            self.response.out.write("""<table class="mytable">
            <tbody>
            <tr class="head">
            <th>tags<br />
            <a href="/useradminpage?order=alpha"><span class=small>alpha</span></a><br />
            <a href="/useradminpage?order=date"><span class=small>newest</span></a><br />
            <a href="/useradminpage?order=popular"><span class=small>popular</span></a>
            </th>
            </tr>
            """)      

            if order_by == "popular":
                for tag in most_used:
                    self.response.out.write("""
                    <tr><td><a href="/tag?tag=%s">%s</a></td></tr>
                    """ %
                    (tag, tag))                
            else:
                for tag in unique_tags:                
                    self.response.out.write("""
                    <tr><td><a href="/tag?tag=%s">%s</a></td></tr>
                    """ %
                    (tag, tag))

            self.response.out.write("""</table>""")  

            #holding table first column end
            self.response.out.write("""</td>""")

            #holding table second column start
            self.response.out.write("""<td style="vertical-align:top">""")
#-----------main table------------#
            display = self.request.get("display")
            main_id = self.request.get("main_id")

            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>
                      <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 href="/useradminpage?main_id=%s&display=false" 

                          onclick="this.parentNode.parentNode.style.display = 'none';">

                        <span class="small">(hide)</span></a>
                        <a href="/comment?main_id=%s"><span class="small">(comments)</span></a>
                      <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>""")    

            #holding table end 
            self.response.out.write('<a href="/useradminpage?cursor=%s">More Results</a>' % cursor)
            self.response.out.write("""</td></tr>""")
            self.response.out.write("""</tbody></table>""")
            self.response.out.write("""</div>""")

推荐答案

您已将此标记为javascript，但我看不到页面中的任何脚本。我也没有看到表格或隐藏链接。

You've tagged this as javascript but I don't see any script in the page. I also don't see a table or a "hide" link.

要隐藏元素及其所有子节点，请设置其样式。显示属性为无，例如

To hide an element and all it's child nodes, set its style.display property to "none", e.g.

<div>here is some content
  <button onclick="this.parentNode.style.display = 'none';">Hide</button>
</div>

当然如果你想再次展示它，你需要一个参考，这样你就可以执行：

Of course if you want to show it again then you'll need a reference to it so you can do:

element.style.display = '';

您可以向数据库发送HTTP请求，以使用各种方法更新显示值，AJAX （即使用XMLHttpRequest对象）很受欢迎。

You can send an HTTP request to the database to update the display value using a variety of methods, AJAX (i.e. using an XMLHttpRequest object) is popular.

根据你的回复，你想要类似的东西这在你的页面中（注意处理程序中从dobule到单引号的变化，因为你想要隐藏整行，你需要从链接上升到TD，然后到TR）：

Based on your reply, you want something like this in your page (note the change from dobule to single quotes in the handler and since you want to hide the entire row, you need to go up from the link to the TD, then to the TR):

<table>
  <tr>
    <td><a href="..." target="_blank">...</a><span class="small">(...)</span><br>
      <span class=small>%s</span>
      <a href="/edit?main_id=%s"><span class="small">(edit)</span></a>
      <a href="/useradminpage?main_id=%s&display=false"

        onclick="this.parentNode.parentNode.style.display = 'none'; return false;">

      <span class="small">(hide)</span></a>
      <a href="/comment?main_id=%s"><span class="small">(comments)</span></a>
    <td><a href="/tc?url=%s&main_id=%s&user_tag_list=%s" title="edit tags">%s</a></td>
  </tr>
</table>

顺便提一下，TR和TD的结束标签也是可选的，这就是为什么缺少结束标签第一个单元格不会引起任何问题。

Incidentally, the closing tags for TR and TD are optional too, which is why the missing closing tag for the first cell doesn't cause any issues.

全面修复是使隐藏链接使用通过执行到服务器的行程来隐藏书签的真实URL。然后使用DOM ready或onload处理程序为所有隐藏链接添加一个监听器：

The "full-blown" fix is to have the "hide" link use a real URL that hides the bookmark by doing the trip to the server. Then use a DOM ready or onload handler to add a listener to all the "hide" links that:

1. 隐藏元素（如上所示） ）


2. 向服务器发送请求以更新状态（HTTP请求）


3. 取消导航（返回false）

这样你的页面可以使用或不使用脚本。

That way your page works with or without script.

以下是整个事情：

// Helper to get the text inside an element
function getText(el) {

  // If textContent is supported, use it
  if (typeof el.textContent == 'string') {
    return el.textContent;
  }

  // Otherwise if innerText is supported, use it
  if (typeof el.innerText == 'string') {
    return el.innerText;
  }
}

// Function that is attached as a listener
// and does the hiding
var hideRow = (function() {

  // Store an image in a closure, used for HTTP request
  var img = new Image();

  // This is the actual function assigned to hideRow
  return function (e) {

    // Get a reference to the element that called the function
    e = e || window.event;
    var el = e.target || e.srcElement;
    var src;

    // Go up the DOM, get the link href for sending
    // request and then hide the TR
    while (el.parentNode && el.parentNode.tagName) {
      el = el.parentNode;

      // Get the link on the way and store its href value
      if (el.tagName.toLowerCase() == 'a') {
        src = el.href; 
      }

      // When get to the TR, send request and
      // hide the row
      if (el.tagName.toLowerCase() == 'tr') {
        el.style.display = 'none';

        // Send request, using fake image but could use
        // XMLHttpRequest
        img.src = src;

        // Cancel navigation
        return false;
      }
    }
  }
}());

// Adds the above listener to all links that have
// the text "(hide)" in them (case insensitive)
function addListeners() {

  // Get all the links in the document
  var link, links = document.links;

  // A regular expression to match "(hide)"
  var re = /\(hide\)/i;

  // For each link...
  for (var i=0, iLen=links.length; i<iLen; i++) {

    // Use a variable for the current link, a bit more efficient
    link = links[i];

    // If the link contains the text "(hide)"
    // add on onclick listener
    if (re.test(getText(link))) {
      link.onclick = hideRow;
    }
  }
}

// Call the add listener function when content is loaded
// Could just add in a script element at the bottomo of 
// the page immediately before the closing body tag
window.onload = function(){
  addListeners();
}

这篇关于如何隐藏一行表（或列表项）并更新数据存储区而不重新加载页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！