Я сделал кнопку редактирования, чтобы редактировать существующие данные. При нажатии на кнопку будет отображаться форма, и если имеется несколько данных, то будет несколько кнопок редактирования, что приводит к отображению нескольких форм. Проблема в том, что я не могу это сделать. Все мои кнопки редактирования и формы видны. Все, что мне нужно, это кнопка редактирования, которая показывает форму, и она будет Dynami c в качестве идентификаторов объектов БД. Я использую 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>