1：JSP頁面（前端用的是H-UI框架）

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">&#xe600;</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：要點解析

     （1）注意觀察input輸入框定義的name名稱：name="sysRigths[0].rightId"   name="sysRigths[1].rightId"

     （2）有多少條資料，[]就寫多少，例如：我有五條資料，第五條資料的[]就應該填[5]。

     （3）後臺Action的會自動的將這些資料一條條的存入到sysRigrhs集合中。