如何隐藏一行表(或列表项)并更新数据存储区而不重新加载页面?

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

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

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

这是我现在的代码:

#-----------main table------------# display = self.request.get("display") main_id = self.request.get("main_id") self.response.out.write(""" """) 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("""  """ % 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("""
linksedit tags
https://stackoverflow.com/questions/7669256/how-to-hide-a-row-of-table-or-a-list-item-and-update-the-datastore-without-rel/%s (https://stackoverflow.com/questions/7669256/how-to-hide-a-row-of-table-or-a-list-item-and-update-the-datastore-without-rel/%s)
https://stackoverflow.com/questions/7669256/how-to-hide-a-row-of-table-or-a-list-item-and-update-the-datastore-without-rel/%s (edit) (hide) (comments)
https://stackoverflow.com/questions/7669256/how-to-hide-a-row-of-table-or-a-list-item-and-update-the-datastore-without-rel/%s
""")

更新

在RobG的回答中尝试style.display ; 但以下代码不起作用:

 ... for item in e: main_id = item.key().id() self.response.out.write(""" 
https://stackoverflow.com/questions/7669256/how-to-hide-a-row-of-table-or-a-list-item-and-update-the-datastore-without-rel/%s (https://stackoverflow.com/questions/7669256/how-to-hide-a-row-of-table-or-a-list-item-and-update-the-datastore-without-rel/%s)
https://stackoverflow.com/questions/7669256/how-to-hide-a-row-of-table-or-a-list-item-and-update-the-datastore-without-rel/%s (edit) (hide) (comments) https://stackoverflow.com/questions/7669256/how-to-hide-a-row-of-table-or-a-list-item-and-update-the-datastore-without-rel/%s
...

UPDATE

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

 #-----------holding table start--------# self.response.out.write(""" """) #holding table second column start self.response.out.write("""""") self.response.out.write("""
""") self.response.out.write("""""") #-----------tags table start--------# self.response.out.write(""" """) if order_by == "popular": for tag in most_used: self.response.out.write(""" """ % (tag, tag)) else: for tag in unique_tags: self.response.out.write(""" """ % (tag, tag)) self.response.out.write("""
tags
alpha
newest
popular
https://stackoverflow.com/questions/7669256/how-to-hide-a-row-of-table-or-a-list-item-and-update-the-datastore-without-rel/%s
https://stackoverflow.com/questions/7669256/how-to-hide-a-row-of-table-or-a-list-item-and-update-the-datastore-without-rel/%s
""") #holding table first column end self.response.out.write("""
""") #-----------main table------------# display = self.request.get("display") main_id = self.request.get("main_id") self.response.out.write(""" """) 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(""" """ % 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("""
linksedit tags
https://stackoverflow.com/questions/7669256/how-to-hide-a-row-of-table-or-a-list-item-and-update-the-datastore-without-rel/%s (https://stackoverflow.com/questions/7669256/how-to-hide-a-row-of-table-or-a-list-item-and-update-the-datastore-without-rel/%s)
https://stackoverflow.com/questions/7669256/how-to-hide-a-row-of-table-or-a-list-item-and-update-the-datastore-without-rel/%s (edit) (hide) (comments)
https://stackoverflow.com/questions/7669256/how-to-hide-a-row-of-table-or-a-list-item-and-update-the-datastore-without-rel/%s
""") #holding table end self.response.out.write('More Results' % cursor) self.response.out.write("""
""") self.response.out.write("""
""")

您已将其标记为javascript,但我在页面中看不到任何脚本。 我也没有看到表格或“隐藏”链接。

要隐藏元素及其所有子节点,请将其style.display属性设置为“none”,例如

 
here is some content

当然,如果你想再次显示它,那么你需要一个引用它,所以你可以这样做:

 element.style.display = ''; 

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

编辑

根据你的回复,你在页面中想要这样的东西(注意在处理程序中从dobule到单引号的变化,因为你想要隐藏整行,你需要从链接上升到TD,然后到达TR):

 
https://stackoverflow.com/questions/7669256/how-to-hide-a-row-of-table-or-a-list-item-and-update-the-datastore-without-rel/...(https://stackoverflow.com/questions/7669256/how-to-hide-a-row-of-table-or-a-list-item-and-update-the-datastore-without-rel/...)
%s (edit) (hide) (comments)
%s

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

编辑2

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

  1. 隐藏元素(如上所示)
  2. 向服务器发送请求以更新状态(HTTP请求)
  3. 取消导航(返回false)

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

这是整个事情:

 // 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 linkhttps://stackoverflow.com/questions/7669256/how-to-hide-a-row-of-table-or-a-list-item-and-update-the-datastore-without-rel/... for (var i=0, iLen=links.length; i 

这里没有App Engine特定的 – 你只需要向你的应用程序发出一个AJAX请求来设置适当的标志。 JQuery是一个非常宝贵的库,可以在客户端使这种工作变得更加简单。 在服务器端,您只需要一个处理程序来获取要在POST请求中修改的值,然后修改它并返回状态代码。 您的客户端代码可以从AJAX调用它。