Html中的表格添加与删除行

开发工具与关键技术：vs2017，jQuery
作者：许建诚
撰写时间：2019/3/30

表格（table）有三个部分：thead；tbody，tfoot。一般我们添加与删除行的操作是对tbody进行的。
首先，新增行：直接选中我们的表格tbody部分，利用append（）这样就可以添加我们想要的行了，如下图所示

在这里提一提：append()是插入内容到被选元素里的结尾处；
prepend()是插入内容到被选元素里的开头处；
after()是插入内容到被选元素后面；
before()是插入内容到被选元素前面；
注意点：
append（）方法中，括号内如果是字符串形式，如果换行了，要注意用+号拼接，
Prepend()，after（），before（）一样，要注意换行拼接。
如果你用单引号来标记字符串的话，那标签属性就需要用双引号’< td class=“ds”>1’
如果是用双引号标记，那就 “< td class=‘ds’>1” 这么做的原因是为了避免冲突

好了，新增说完了，接下来就是删除了。删除的话我们就用remove()。删除最重要的就是选择到我们需要删除的元素，所以着重点在于遍历。因此删除行代码的复杂性在于我们选定行的设定。
我们删除的方式主要有两种：
第一种是通过给行添加点击事件去删除行，如下图


这种通过传参的方式，将我们赋予点击事件的元素通过参数获取到，然后在函数中获取到行，然后删除行。

第二种是通过条件筛选的方式去删除行，用于删除多行。这种方式的删除行，我们事先为想要删除的行添加一个状态，然后遍历到这个状态的元素，然后remove()。如图

在这里，我添加的状态是为该行添加一个类名Opt，然后就可以触发删除选中行的函数进行删除了。

后语：正所谓触类旁通，这里的添加行，行也是元素，元素即标签，所以说，不管是添加什么标签，这里的代码一样适用，只是对象改变而已