Within my Django project, there is a model named Exercise.
On the HTML page, there is a table displaying all exercises associated with the user.
In the snippet below, you can view the code for the table showcasing the user's exercises, along with buttons to append new rows.
Purpose: Upon adding a new row to the table, I aim to generate a blank instance of the Exercise model as well.
If such functionality isn't possible through basic Django and JQuery, kindly suggest frameworks that support it. Many thanks.
$('.deleteButton').on('click', function () {
if ($(this.parentNode.parentNode.parentNode).find('tr').length > 3) {
$(this.parentNode.parentNode.parentNode).find("tr:nth-last-child(2)").remove();
}
})
$('.addButton').click(function () {
$(this.parentNode.parentNode.parentNode).find('tr:last').before('<tr><td>name</td><td>sets</td><td>reps</td><td>weight</td></tr>')
}){% block content %}
<div class="row" style="margin-top: 1%;">
{% for workout in workouts %}
<div class="col-6 col-lg-3" style="margin-right: 50px;">
<table class="mytable">
{% for exercise in workout.exercise_set.all %}
<tr>
<td>{{ exercise.name }}</td>
<td>{{ exercise.sets }}</td>
<td>{{ exercise.repetitions }}</td>
<td>{{ exercise.weight }}</td>
</tr>
{% endfor %}
<tr id="editrow">
<td colspan="2">
<input class="addButton" type="button" value="Delete" />
</td>
<td colspan="2">
<input class="deleteButton" type="button" value="Delete" />
</td>
</tr>
</table>
</div>
{% endfor %}
</div>
{% endblock %}