这样的表格是如何实现的？

[Oathbinder]

要用 bootstrap 做一个 SwitchyOmega 情景模式设置那样的表格，如图 不需要左边的排序功能，点击添加条件按钮就多一行，每行四列，每列一个文本框和一个删除当前条件的按钮，表格下面有个提交，点击之后读所有文本框的内容进行处理。

刚学前端一天看起来这不像是 bootstrap+jquery 可以解决的，比如去访问非固定 id 的文本框内容，看了下 vue 的文档 https://vuejs.org/v2/guide/list.html 的 v-for demo 好像有点接近，但是一天前端经验看 vue 感觉非常难受，所以来问问思路和代码片段。谢谢

[cxbig]

Bootstrap 足以实现 Style 的部分
这些表单内容是不是自动提交更新的？如果是，单用 jQuery 会比较费事。可以考虑用 React 或 Vue 做交互。

[Oathbinder]

@cxbig 不用自动提交，用户输入完成之后点击提交按钮，如下图
现在是我用固定文本框的 id 手动建的表格，如何才能实现点击 Add Condition 就添加一行，点击删除按钮删除所在行？

[coo]

如果用 jQuery 的方法，可以维护一个列表，列表中存对象，然后每次数据发生变化时重新渲染到界面。

当然还是推荐用 Vue，很好解决。

[cxbig]

@Oathbinder
通常的原理是每一行的 html 做成模板放前端，点击更新的时候 append 进去；
删除的时候判断该行有没有 id （后台数据的 id ），有就在保存的时候发回一个 delete 信号，没有就直接干掉 html 即可。

[Mogugugugu]

楼主可以看看这个插件，API 什么的都还不错，实现楼主的场景不是问题。http://appendgrid.apphb.com/

[meepo3927]

才学一天吗，没有基础不好搞。

用 vue.js 比较方便， 当然用 jquery 动态添加 html 也可以实现

[lneoi]

看楼主只是要在界面上动态添加元素吧
把那一行的 html 模板写好，然后点击按钮时，插入到 table 末尾就行了。
删除，this 可以获取当前点击的，然后向上找 tr 父节点，就是包含此行 html 代码的那个容器，删掉即可。涉及后台取个参数发个 ajax，返回成功后再执行删除 html 操作。