display:'table'無法正常作業

我希望只有在單擊提交按鈕后才能看到表格。但它并沒有像它應該的那樣停留在螢屏上。單擊提交按鈕后，表格會出現一秒鐘，然后再次變得不可見。請讓我知道我在代碼中做錯了什么。另外請讓我知道是否有其他方法可以做到這一點。

索引.html

 <form action="#" id="form" method="post">

        <div style="margin-left: 2rem;">
            <!-- <input  type="submit" value="Submit" id="btn" onclick="hide()"> -->
            <input class="btn btn-primary" type="button" value="Submit" id="btn" onclick="hide()">
          </div>


    </form>
      
      
      <div style="margin-top: 4rem; display: flex; justify-content: center; align-content: center;">
        <table style="display: none;" id="table">
          <tbody>
      
            <tr>
      
              <th scope="row">Profile No. : </th>
      
              <td>{{ProfileNo}}</td>
      
            </tr>
      
            <tr>
      
              <th scope="row">Name : </th>
      
              <td>{{Name}}</td>
      
            </tr>
          </tbody>
        </table>
      
      </div>
      
      
      
      <script>
        function hide() {
      
          document.getElementById("form").submit();
      
          let table = document.getElementById("table");
      
          if (table.style.display === 'none') {
      
            table.style.display = 'table';
      
          }
        }
      </script>

uj5u.com熱心網友回復：

為此，您需要使用 AJAX。如果您這樣做，提交按鈕會向服務器執行 POST 請求，因此您會再次重繪 頁面。

這是一個很好的解決方案供您使用：https ://www.pluralsight.com/guides/work-with-ajax-django

uj5u.com熱心網友回復：

您可以通過以下方式在 Django 中執行此操作：

視圖.py：`

def contact(request):
    if request.method == "POST":
        message_name = request.POST['message-name'] 
        # message-name has to be in your form
        # do something with the data in your view
        return render(request, 'template.html', {'message_name': message_name})
#return a variable message_name to the context

template.html:

{% if message_name %}
<center><h2><table id="your table"><tr><td></td></tr></h2></center>
{% else %}
<form action="#" method="post">{% csrf_token %}
<div class="row">
<div>
<input type="text" name="message-name">
</div>
<button type="submit">Display table</button>
</form>
{% endif %}

` 如果不想在表單中顯示任何欄位，可以使用隱藏輸入型別。這個想法是從 POST (message-name) 中捕獲變數并在視圖中依賴它 (message_name)

uj5u.com熱心網友回復：

您也可以使用 localstorage 并切換您的顯示值。客戶端的Javascript無法接收發布資料，您可以在提交表單時在本地存盤中存盤一個值，一旦頁面重新加載，檢查存盤的值，修改您的顯示，然后重置該值（就像您沒有再次提交任何東西一樣）

示例（不確定它是否適用于 SO 片段，復制并實際嘗試）

window.onload = function () {
  let mydisplay = localStorage.getItem("myTable");
  console.log(mydisplay);
  if (mydisplay == "table-cell") {
    document.querySelector("#table").style.display = mydisplay;
    localStorage.setItem("myTable", "none");
  } else {
    document.querySelector("#table").style.display = "none";
  }
};
function hide() {
  document.getElementById("form").submit();
  console.log("submit");
  localStorage.setItem("myTable", "table-cell");
}

<form action="#" id="form" method="post">
  <div style="margin-left: 2rem;">
    <!-- <input  type="submit" value="Submit" id="btn" onclick="hide()"> -->
    <input class="btn btn-primary" type="button" value="Submit" id="btn" onclick="hide()">
  </div>
</form>
<div style="margin-top: 4rem; display: flex; justify-content: center; align-content: center;">
  <table id="table">
    <tbody>
      <tr>
        <th scope="row">Profile No. : </th>
        <td>{{ProfileNo}}</td>
      </tr>
      <tr>
        <th scope="row">Name : </th>
        <td>{{Name}}</td>
      </tr>
    </tbody>
  </table>
</div>

這是一個 jsfidlle，您可以在其中復制/粘貼獨立 HTML 頁面的代碼以進行測驗。https://jsfiddle.net/zb901rLm/

標籤：javascript html jQuery css django

上一篇：4輸入&動態變化變換

下一篇：決議HTML表格并隱藏列