Как скрыть строку таблицы (или элемент списка) и обновить хранилище данных без перезагрузки страницы?

Question

У меня есть список закладок, отображаемых на столе . Я добавил ссылку «скрыть», чтобы скрыть закладку, которую не хочу видеть в списке, но которую я все еще хочу сохранить (таблица и ссылка скрытия отображаются, только если вы вошли в систему).

Теперь я делаю это, получая элемент из базы данных, изменяя его свойство display на «False» и снова визуализируя страницу.

Я думаю, что это лучше сделать с помощью javascript без перезагрузки страницы. Я нашел несколько ссылок, чтобы скрыть строку таблицы, но кроме скрытия мне также нужно записать новое свойство отображения в базу данных. Я не понимаю, как я могу это сделать. Каков наилучший способ скрыть строку и записать новое свойство отображения в базу данных? Спасибо.

У меня сейчас такой код:

#-----------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 в Ответ РобГ ; но следующий код не работает:

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

...

UPDATE

Попытка Отредактированный ответ RobG . В этом случае, когда я нажимаю кнопку «Скрыть», строка на мгновение скрывается, а затем снова возвращается. Я не понимаю почему. Я вставляю ниже код, включая таблицу хранения:

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

Answer 1

Вы отметили это как javascript, но я не вижу ни одного скрипта на странице.Я также не вижу таблицы или ссылки «скрыть».

Чтобы скрыть элемент и все его дочерние узлы, установите для его свойства style.display значение «none», например,

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

Конечно, если вы хотите показать его снова, вам понадобится ссылка на него, чтобы вы могли сделать:

element.style.display = '';

Вы можете отправить HTTP-запрос в базу данных, чтобы обновить отображаемое значение, используяAJAX (т. е. с использованием объекта XMLHttpRequest) популярен.

Редактировать

Исходя из вашего ответа, вы хотите что-то подобное на своей странице (обратите внимание на переход от dobule к одинарным кавычкамв обработчике и так как вы хотите скрыть всю строку, вам нужно перейти от ссылки к TD, а затем к 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также необязательно, поэтому отсутствующий закрывающий тег для первой ячейки не вызывает проблем.

Редактировать 2

Полное исправление заключается в наличии ссылки "скрыть"используйте реальный URL, который скрывает закладку, выполняя поездку на сервер.Затем используйте обработчик DOM ready или onload, чтобы добавить слушателя ко всем ссылкам «hide», которые:

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 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();
}

Answer 2

Здесь нет ничего специфичного для App Engine - вам просто нужно сделать запрос AJAX для вашего приложения, чтобы установить соответствующий флаг. JQuery - довольно бесценная библиотека для упрощения работы такого рода на стороне клиента.На стороне сервера вам просто нужен обработчик, который получает значение для изменения в запросе POST, затем изменяет его и возвращает код состояния.Ваш код на стороне клиента может вызывать это из AJAX.