添加多个行

上篇介绍了如何添加行,本片介绍添加多个行.通过for循环添加行的代码,循环次数为需要添加的行数,为了使重复的代码减少,使用变量来同时满足多个表格添加行的不同行数
获取重要变量

创建用于接收单元格的参数,用记录当前行的单元格数的参数,用于记录当前表格的行数的参数,变量的赋值在点击事件中完成,防止变量的参数被其他方法调用或者未被及时的清除而对多个表格添加不同个数的单元格的行产生影响
获取当前行表格的行的单元格数的方法可以使用上文在添加行时使用的标签,通过选中存储行的标签下的input标签即可获取当前表单的当前行的单元格数,选中存放行的标签的个数即为当前表格的行的行数

通过循环rows(当前表格的行的单元格数)即可同时满足多个表格,添加给每个单元格的ID是一个拼接的ID,通过一段字符串加一个代表第几个表格的数字,一个代表第几行的数字以及一个代表第几个单元格的数字
然后添加到用于接收单元格的变量,再通过字符串拼接一个标签,最后将行添加到指定位置,同时满足多个表格的添加行就完成了,
拓展:添加下拉框
上文的添加的单元格都是下拉框,此处拓展一个添加下拉框的方法

比如需要点击新增的行的第一个单元格是下拉框,那做法就是,先全部添为input,然后选中需要修改为下拉框的单元格,比如每行的第一个,由于添加的单元格的ID是四部分组成,可以轻易的分辨单元格所在的表格,行数,行内的位置,所以可以轻易的选中,.选中之后同过jQuery的remove方法删除整个单元格,然后在选中的位置添加一个select标签,ID需要与被删除的input标签保持一致,为了方便查询等一系列后续操作.
之后就如上图所示,给select标签添加option,由于本项目是动态获取,所以涉及到异步提交,如果下拉框只需要写死的数据,就直接通过选中的select标签,给它添加几个option, value值一定需要赋值,为了回填与判断选中的数据.value值最好是数字,为了方便传输到控制器与在控制器中接收,
如果添加的option是需要数据库中的数据那需要在数据库中先查询出必要的数据与主键.数据绑定在option显示的位置,主键ID绑定在value值上,方便回填是通过id查询,写法如上图所示
注:可以添加一个value值为0的option用以表示未选中任何项