Теперь добавим функционал, который позволит редактировать добавленные книги.

Создадим форму для редактирования, добавим класс BookEditForm в файл books\forms.py:

from django.forms import ModelForm, CharField, TextInput
from .models import Book


class BookCreateForm(ModelForm):
    title = CharField(required=False, widget=TextInput(attrs={"class": "clrtxt", "placeholder": "Title"}))
    author = CharField(required=False, widget=TextInput(attrs={"class": "clrtxt", "placeholder": "Author"}))
    price = CharField(required=False, widget=TextInput(attrs={"class": "clrtxt", "placeholder": "Price"}))

    class Meta:
        model = Book
        fields = ['title', 'author', 'price']


class BookEditForm(BookCreateForm):
    title = CharField(required=False, widget=TextInput())
    author = CharField(required=False, widget=TextInput())
    price = CharField(required=False, widget=TextInput())

Создадим файл шаблона templates\partial_book_update_form.html, с содержимым:

                    <tr>
                        <!-- Ячейка номера книги -->
                        <td>
                            {{ book.id }}
                        </td>

                        <!-- Ячейка названия книги -->
                        <td>
                            {{ form.title }}
                        </td>

                        <!-- Ячейка автора книги -->
                        <td>
                            {{ form.author }}
                        </td>

                        <!-- Ячейка цены книги -->
                        <td>
                            {{ form.price }}
                        </td>

                        <!-- Ячейка состояния -->
                        <td>
                            {% if not book.read %}
                                <!-- Кнопка "Unread" -->
                                <button disabled>
                                    Unread
                                </button>
                            {% else %}
                                <!-- Кнопка "Read" -->
                                <button disabled>
                                    Read
                                </button>
                            {% endif %}
                        </td>

                        <!--  Ячейка кнопок действия -->
                        <td>
                            <!-- Кнопка "Save" -->
                            <button type="submit">
                                Save
                            </button>
                            <!-- Кнопка "Cancel" -->
                            <button>
                                Cancel
                            </button>
                        </td>
                    </tr>

В шаблон templates\base.html добавим теги формы <form> и </form> в начало:

                <!-- Таблица книг -->
                <form>
                <table>

И в конец файла:

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

Добавим функции update_book_details() и book_detail() в файл books\views.py:

from .forms import BookCreateForm, BookEditForm


def update_book_details(request, pk):
    book = Book.objects.get(pk=pk)
    if request.method == 'POST':
        form = BookEditForm(request.POST, instance=book)
        if form.is_valid():
            book = form.save()
            return render(request, 'partial_book_detail.html', {'book': book})
    else:
        form = BookEditForm(instance=book)
    return render(request, 'partial_book_update_form.html', {'book': book, 'form': form})

@require_http_methods(['GET'])
def book_detail(request, pk):
    book = get_object_or_404(Book, pk=pk)
    return render(request, 'partial_book_detail.html', {'book': book})

Добавим маршруты для данных функций, отредактируем файл books\urls.py:

from django.urls import path
from .views import book_list, create_book, update_book_details, book_detail

urlpatterns = [
    path("", book_list, name="book_list"),
    path("create_book/", create_book, name="create_book"),
    path("update_book_details/<int:pk>/", update_book_details, name="update_book_details"),
    path("book_detail/<int:pk>/", book_detail, name="book_detail"),
]

Подключим кнопку Edit в шаблоне templates\partial_book_detail.html:

                                <!-- Кнопка "Edit" -->
                                <button class="disbtn"
                                        hx-put="{% url 'update_book_details' book.id %}"
                                        hx-target="closest tr"
                                        hx-swap="outerHTML" >
                                    Edit
                                </button>

 
HTMX атрибуты для кнопки Edit:

• hx-put="{% url 'update_book_details' book.id %}" определяет адрес запроса /update_book_details/<id книги>/ и тип запроса - PUT.

• hx-target="closest tr" задаёт целевой элемент, куда будет добавлен ответ, в данном случае это будет ближайший элемент tr - текущая строка таблицы.

• hx-swap="outerHTML" указывает как добавлять ответ в целевой элемент, в данном случае ответом будет заменён весь целевой элемент.

После нажатия данной кнопки, текущая строка таблицы будет заменена на ответ - строку с формой редактирования книги.