点击添加行

假设插件无法达到需求的效果,比如在表格中的行可以新增行,行中的单元格绑定下拉框等过于复杂的需求就只能自己写.
一步:选中需要绑定事件的对象

比如我这个项目添加行的对象是一个按钮,点击一次添加一行,首先通过jQuery选中按钮添加点击事件,上图的选择方式通过ID选择,id通过某种规则进行拼接,主要为了节省代码量,因为需要点击添加行的表格可能不止一个,而为了避免重复出现相同的代码,于是通过for循环加ID的拼接(遵循某种规则,比如,第一个按钮的ID为·1第二个是add_row_2,这样就很方便拼接);
第二步:创建并添加单元格

添加单元格的原理是,通过例如jQuery的html(text方法不行!),append等方法向指定需要添加到的元素,添加的内容为字符串类型的标签,这些方法检测到后会正确的添加标签到页面上(具体添加到的位置由添加的方法与选中的元素而定),而非输出文本值
当你将需要添加的标签的字符串格式通过可以正确读取的方法添加到页面的指定位置时,添加一个单元格就完成了,
万事开头难,当单元格添加完成后,添加行就简单多了,只需要通过一个for循环,设置循环的次数为单元格的行数,就可以得到一个行,而将添加行的代码放置在点击事件中时,点击添加行就完成了
以上就是添加行的步骤,接下来是具体操作
首先创建一个空的字符串变量,用来接收所有单元格(也可以使用数组,只需要在赋值时将加等改成等即赋值就行),上图的其它两个变量主要用于计算当前选项卡的表格的单行的单元格数与当前选项卡的表格有多少行(不算表头),这两个变量的主要用途是为了区分,为了节省代码,所以将几个页面的添加行放在了一个点击事件内,且只要格式正确,可以用于任何页面的任何长度的单元格的添加,相当与封装了一个方法,下一篇会详细的介绍,与本篇就不多做叙述.
需要添加多少个单元格通过for循环来决定,你可以直接填写需要添加的长度,单此方式在需要添加多个不同长度的行时,需要使用多个for循环
下图是不使用变量单元格赋值与使用变量单元格赋值的对比,需要添加的行越多,越复杂,不使用变量的重复的代码就越多(rows是当前需要添加的表格的行的单元格数)

通过加等将所有的单元格赋值在一个变量上,到这一步,添加行就差不多完成了
以下是一些细节优化
优化一:

为了方便后续的选中整行,最好创建一个字符串格式的行,通过字符串拼接的方式将值赋值给用于存储行的字符串格式的变量,最后再添加到页面的指定位置
优化二:
添加ID

为了方便选中与区分,最好给每一个单元格添加一个ID,且不能重复,方便之后的选中,比如将每一行的第一个单元格修改为下拉框,第二个单元格禁止输入等,还方便了异步提交的参数的传递;
如果没有添加ID,在数据新增到数据库获取值会非常麻烦