Py学习  »  Jquery

如何获取html表单的db惟一id,并在css和jquery中使用它为django的每个表单数据生成动态表单?

Sharif Zhumon • 4 年前 • 493 次点击  

我做了一个编辑按钮,用于编辑现有数据。当按下按钮时,它将显示表单,如果有多个数据,则将有多个编辑按钮,从而显示多个表单。 问题是,我做不到。我所有的编辑按钮和表单都是可见的。我只需要一个显示表单的编辑按钮,它将作为DB对象id动态显示。我使用Django作为编辑表单的后端来保存编辑的数据。 代码:

$(document).ready(function() {
  $(".formButton").click(function() {
    var togle= $('this').attr("id")
    print(togle)

    $(togle).hide();
  });
});
h1,h2{
  font-style: italic;
  color: green;
  background-color: inherit;
}
/* .djangoaccessed{
  border: 2px solid black;
} */
table, th, td{
  border: .5px solid black;
}


.hello{

  display: none;
}
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Index</title>
    <link rel="stylesheet" href="{% static "css/style.css" %}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script
  src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
  integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
  crossorigin="anonymous"></script>
  </head>
  <body>
    <h1>This is Django TODO APP.</h1>

      {% comment %} <div class="container">
        <div class="jumbotron">

          <form method="get" action="/search1/">
      <p><label for="id_q">Search:</label>

      <select name="topic">
        {% for todo in all_todo %}
          <option value="{{ todo.id }}">{{ todo.topic }}</option>
        {% endfor %}
      </select>
      <input type="submit" value="Submit" /></p>
      </form>

  </div>

</div> {% endcomment %}


  {% comment %} <div class="container">

    <select name="topic">
   {% for todo in all_todo %}
   <option value="{{todo.id}}">{{ todo.topic }}</option>
   {% endfor %}
 </select>
 <br><br>
  </div> {% endcomment %}

<div class="container">
  <div class="jumbotron">



    {% if all_todo %}
    <table >
      <thead>

        <th>Topic</th>
        <th>Name</th>
        <th>Description</th>
        <th>Date-time</th>

      </thead>
      {% for todo in all_todo %}
    <tr>
      <td>{{ todo.topic }}</td>
      <td>{{ todo.name }}</td>
      <td>{{ todo.content }}</td>
      <td>{{ todo.datetime }}</td>
      <td>
        <form action="/deltodo/{{todo.id}}/"  method="post" style="display: inline;">
          {% csrf_token %}
          <input type="submit"  value="Delete">
        </form>
      </td>
      <td><button type="button" class="formButton" id="{{todo.id}}">Edit</button> {% comment %} update data {% endcomment %}
      <div class="container">
                <form action="/updatetodo/{{todo.id}}/"  method="post" id="hello-{{todo.id}}" class='formid' >
                  {% csrf_token %}
                  <label for="topics">Add Activity:</label>
                  <input type="text" name="topic" placeholder="update your todo type" value={{ todo.topic }}>
                  <input type="text" name="name" placeholder="update your todo name" value={{ todo.name }}>
                  <input type="text" name="content" placeholder="update your todo description" value={{ todo.content }}>
                  <input type="datetime-local" name="datetime" value="{{ todo.datetime }}">
                  <input type="submit"  value="Save">

                </form>
                </div>
              </td>
    </tr>

      {% endfor %}
    </table>
    {% else %}
    <p>No data found!</p>
    {% endif %}
    {% comment %} </div>
    </div>







          {% comment %} save data {% endcomment %}
          <div class="container">

                    <form action="/addtodo/"  method="post" >
                      {% csrf_token %}
                      <label for="topics">Add Activity:</label>
                      <input type="text" name="topic" placeholder="Input your todo type">
                      <input type="text" name="name" placeholder="Input your todo name">
                      <input type="text" name="content" placeholder="Input your todo description">
                      <input type="datetime-local" name="datetime" >
                      <input type="submit"  value="Save">

                    </form>
                    </div>
            </div>
          </div>

        <script src="{% static "js/form.js" %}">  </script>
  </body>
</html>
Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/56020
 
493 次点击