在表格中指定位置增加、删除行

在表格中增加、删除指定行

开发工具与关键技术：DW 增加、删除指定行
作者：周欢
撰写时间：2019/2/15

若想要实现在指定的位置的增加一行，然后要是增加出错了又想删除这一功能我们该怎么实现呢？接下来让我们具体的来看看该怎样去实现这一功能。

这是一张两行表格的简单布局，然后通过JS给它实现在指定位置增加行删除行。

增加行的原理：
在指定位置添加的原理大致上是，想要增加行就得先创建这个行，创建行之前又需要先创建列。所以首先我们需要创建表格中的列（td）,创建td成功后再给他添加相应的内容，添加内容成功后我们需要在指定的位置去插入这个行（tr），然后在这个指定的位置插入的新行中去追加到它里面的子元素也就是我们之前所创建的列（td）。

删除行的原理：
添加之后我们也可以删除增加的内容，就是差不多是增加行的一个逆思维。先得找到我们删除行的父级元素，从父级元素在再找到我们需要删除的行，最后将我们需要删除的行从它的父级元素中移除。从而可以达到了在指定位置增加行之后还能再删除。

效果示意图：

拓展：
清空的内容只是input标签里面的内容，所以增加的行只要不删除它一样的可以清空。设置一个这样的清空全部计划按钮的目的其实是想要这个计划表格可以多次使用。可在input标签中填写内容然后点击清空全部计划按钮进行验证。

清空全部计划按钮的原理：
先获取到表格中清空全部计划按钮，再获取到表格中的所有input标签，最后再在表格中遍历循环到所有的input标签，清空掉所遍历到的所有input标签中的内容。

该例子中还是还引用了日历插件，点击日历的图标可供日期选择。