Javascript 添加或删除输入表中的行以及一些可用的Jinja

我有一个HTML表，其中包含一些

jinja

（在

value

属性中）

我的

模板

：

<form class="" method="POST">
{% csrf_token %}
  <table class="table table-hover my-5">
    <thead class="">
        <tr>
            <th>No</th>
            <th>Name</th>
            <th>rank</th>
            <th>gmail</th>
            <th>Delete?</th>
        </tr>
    </thead>
    <tbody class="my_dynamic_table">
      {% for i in report_tableA %}
      <tr>
        <td>i</td>
        <td><input type="text" name="name" value="{{ i.name }}"></td>
        <td><input type="text" name="rank" value="{{ i.rank }}"></td>
        <td><input type="email" name="gmail" value="{{ i.gmail }}"></td>
        <td><i class="fa fa-times-circle" style="font-size: 22px; color: red;"></i></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  <div class="row mx-5">
    <button class="btn btn-warning">Add row</button>
    <button type="Submit" class="btn btn-primary ml-auto">Submit</button>
  </div>
</form>

{%csrf_令牌%}
不
名称
等级
gmail
删除？
{report_tableA%}
我
{%endfor%}
添加行
提交

现在我的问题是如何实现

addrow

按钮和

Delete

图标（位于last

td

内）的功能？在这里，

addrow

函数将在表中添加一个新行，该新行也带有

空白

值

属性

我以前通过以下方法练习过。但现在的问题是，这里也添加了jinja

---

如果您能帮我解决这个问题，我将不胜感激。

您可以首先

克隆
tr每当单击
添加行
按钮，然后使用
查找（“输入”）.val（“”
清空值属性和
查找（“td:eq（0）”）。text（长度）
向第一个
td
添加新的
I
值。现在，当单击“删除”时，只需使用
.nextest（'tr'）
即可获得最接近的tr并删除该tr。此外，您还需要在
td
中再次调整
i
值，因此使用
。每个
循环迭代trs并更改它

演示代码：
$（.add”）。在（“单击”，函数（）{
//获取tr的长度
变量长度=$（“.my\u dynamic\u table tr”）。长度+1
console.log（长度）
//克隆第一个tr
var clone=$（“.my_dynamic_table tr:first”）.clone（）；
$（克隆）.find（“input”）.val（“”；//所有克隆输入的空值
$（克隆）.find（“td:eq（0）”）.text（长度）；//添加'i'值
$（克隆）.appendTo（$（“.my\u dynamic\u table”）//追加到tbody
})
//单击“删除”按钮一次
$（文档）。在（“单击”，“删除”，函数（）上）{
$（this）.closest（“tr”）.remove（）；//remove tr
//循环通过tr
$（“.my\u dynamic\u table tr”）。每个（函数（i）{
$（this.find（“td:eq（0）”）.text（（i+1））//更改'i'值
})
})

不
名称
等级
gmail
删除？
1.
x
添加行
提交
附加行的空值是您想要的还是其他什么？是的，这就是我想要的，并且还需要为任何行添加一个
removeow
选项。您在问题中添加的链接已经做到了这一点。附加时它不包括
value
属性，它还具有删除功能（被接受的答案）。是的，但我不能使用它，因为某些原因：现在
I
的值应该来自jinja…..还有一个问题，比如我需要一行
value=“{I.something}”
属性。但是新添加的
行不应该有
值
。您可以在这里使用jquery吗？非常感谢，现在它工作得很好！