1:JSP页面(前端用的是H-UI框架)javascript
1:HTML代码 <div class="cl pd-5 bg-1 bk-gray mt-20"> <span class="l"> <a href="javascript:;" onclick="add()" class="btn btn-primary radius"><i class="Hui-iconfont"></i> 添加行</a></span> </div> <table id="table1" class="table table-border table-bordered table-striped"> <thead> <tr class="text-c"> <th>编号</th> <th>权限编号</th> <th>权限名称</th> <th>资源路径</th> <th>权限父编号</th> <th>操做</th> </tr> </thead> <tbody> <tr class="text-c"> <th>0</th> <td><input type="text" class="input-text" placeholder="请输入权限编号" name="sysRigths[0].rightId" ></td> <td><input type="text" class="input-text" placeholder="请输入权限名称" name="sysRigths[0].rightName" ></td> <td><input type="text" class="input-text" placeholder="请输入资源路径" name="sysRigths[0].resourcePath" ></td> <td><input type="text" class="input-text" placeholder="请输入权限父编号" name="sysRigths[0].rightPid" ></td> <td><input class="btn btn-primary radius" type="button" onclick="del(this);" value="删除"></td> </tr> <tr class="text-c"> <th>1</th> <td><input type="text" class="input-text" placeholder="请输入权限编号" name="sysRigths[1].rightId" ></td> <td><input type="text" class="input-text" placeholder="请输入权限名称" name="sysRigths[1].rightName" ></td> <td><input type="text" class="input-text" placeholder="请输入资源路径" name="sysRigths[1].resourcePath" ></td> <td><input type="text" class="input-text" placeholder="请输入权限父编号" name="sysRigths[1].rightPid" ></td> <td><input class="btn btn-primary radius" type="button" onclick="del(this);" value="删除"></td> </tr> </tbody> </table> </div> 2:JS代码 <script type="text/javascript"> var i=1; function del(e) { $(e).parent().parent().remove(); i--; } function add() { i++; $("#table1").find('tbody').append("<tr class=\"text-c\">\n" + " <th>"+i+"</th>\n" + " <td ><input type=\"text\" class=\"input-text\" placeholder=\"请输入权限编号\" name=\"sysRigths["+i+"].rightId\"></td>\n" + " <td ><input type=\"text\" class=\"input-text\" placeholder=\"请输入权限名称\" name=\"sysRigths["+i+"].rightName\"></td>\n" + " <td ><input type=\"text\" class=\"input-text\" placeholder=\"请输入资源路径\" name=\"sysRigths["+i+"].resourcePath\"></td>\n" + " <td ><input type=\"text\" class=\"input-text\" placeholder=\"请输入权限父编号\" name=\"sysRigths["+i+"].rightPid\"></td>\n" + " <td ><input type=\"button\" class=\"btn btn-primary radius\" onclick=\"del(this);\" value=\"删除\"></td>\n" + " </tr>") } </script>
2:Action前端
1:SysRight对象 public class SysRight implements java.io.Serializable { // Fields private String rightId; private String rightName; private String resourcePath; private String rightPid; get/set方法省略 } 2:在对应的Action中定义SysRight集合 public class SysRightAction extends BaseAction implements Preparable, ModelDriven { private List<SysRight> sysRigths; get/set方法省略 }
3:要点解析java
(1)注意观察input输入框定义的name名称:name="sysRigths[0].rightId" name="sysRigths[1].rightId"app
(2)有多少条数据,[]就写多少,例如:我有五条数据,第五条数据的[]就应该填[5]。框架
(3)后台Action的会自动的将这些数据一条条的存入到sysRigrhs集合中。ui