django如何通过按钮增加和删除一行form表单。

django如何通过按钮增加和删除一行form表单。

问题描述:

想要达成的样式如下
图片说明图片说明

点击+可以新增一行,点击-可以删除一行
我table中的表单是通过django的form生成到前端的

前端代码如下

 <tr>
      <td>{{ form1.relationship }}</td>
      <td>{{ form1.re_name }}</td>
      <td>{{ form1.re_number }}</td>
      <td>{{ form1.re_address }}</td>
      <td><button></td>
 </tr>

要新生成这样的一行,想问问大佬们,怎样能做到,可以通过bootstrap办到吗?还是要写一个js,但是我对js不是太熟。。。。

现在我写了一个js,代码如下

html:

图片说明

js:

图片说明

最后出来的效果点击+不会出现新的一行,报错如右边所示:

图片说明

而我将拼接中的{{form.relationship}}改为{/{form.relationship}}时会在表单的第一行出现增加的表单行:

图片说明

图片说明

点击-,可以删除那一行,我在想是不是,因为整个表单都是通过django后端form生成的原因,导致新增加的行出现在首行。

问题总结下来:

1、通过js增加新的一行表单中是不是不支持{{form}}。

2、页面通过django的form生成的表单页,通过js增加新的一行会在首行添加,为什么会这样???

静等大神的答案

可以通过glone,直接glone上一行tr,或者通过bootstrap-table的$table.bootstrapTable('append', data)方法做到,但我现在面临了一个新的问题,就是每次只能提交最后一行的数据到数据库,坑一个接着一个啊。。。

需要自己写段js代码,把要加的form代码插入到 dom 里