JS动态添加和删除行

实现页面动态添加和删除行效果如下：

主要实现包括页面和js部分
页面HTML
主要通过table来实现，html先写好模版。

 <table id="ruleTable">
                        <tr>
                            <td>
                                期数:<input type="text" name="period" class="easyui-numberbox" id="period" data-options="min:0,precision:0,required:false"/>
                            </td>
                            <td>
                                免息比:<input type="text" name="freePercent" value="100" disabled class="easyui-numberbox" id="freePercent" data-options="min:0,precision:2,required:false"/>%
                            </td>
                            <td>
                                <a href="javascript:void(0)"  onclick='addTr("ruleTable",-1)'>添加规则</a>
                            </td>
                            <td>
                                <a href="javascript:void(0)" onclick='delTr("ruleTable",this)'>删除规则</a>
                            </td>
                        </tr>
                    </table>

JS部分实现
js主要实现对页面已有的代码的模版进行添加和删除。
对页面table的jquery操作需要有一个简单的了解：

//添加规则
function addTr(table,row){
    let trhtml="<tr>\n" +
        "                            <td>\n" +
        "                                期数:<input type=\"text\" class=\"easyui-numberbox\" name=\"period\" id=\"period\" data-options=\"min:0,precision:0,required:false,missingMessage:'不能为空'\"/>\n" +
        "                            </td>\n" +
        "                            <td>\n" +
        "                                免息比:<input type=\"text\" class=\"easyui-numberbox\" value=\"100\" disabled name=\"freePercent\" id=\"freePercent\" data-options=\"min:0,precision:2,required:false,missingMessage:'不能为空'\"/>%\n" +
        "                            </td>\n" +
        "                            <td>\n" +
        "                                <a href=\"javascript:void(0)\"  onclick='addTr(\"ruleTable\",-1)'>添加规则</a>\n" +
        "                            </td>\n" +
        "                            <td>\n" +
        "                                <a href=\"javascript:void(0)\" onclick='delTr(\"ruleTable\",this)'>删除规则</a>\n" +
        "                            </td>\n" +
        "                        </tr>";

     //获取table最后一行 $("#tab tr:last")
     //获取table第一行 $("#tab tr").eq(0)
     //获取table倒数第二行 $("#tab tr").eq(-2)
     //这里是-1为最后一行，倒数第一行
    let $tr=$("#"+table+" tr").eq(row);

    // tr总行数
    if($tr.size()===0){
        $("#"+table+" tbody").html(trhtml);
        // alert("指定的table id或行数不存在！");
        // return;
    }else{
        $tr.after(trhtml);
    }
    $.parser.parse($('#'+table));
}


//删除规则
function delTr(table,$this){
    //如果只有一条就不能继续删了
    let $tr=$("#"+table+" tr");
    if($tr.size()===1){
        $.messager.alert("提示","最后一条了，不能再删啦！","info");
        return false;
    }
    $($this).parent().parent().remove();

}

提交页面获取table数据

 obj.find("#ruleTable").find("tr").each(function () {
                //遍历每一行
                let period=$(this).find("input[name='period']").val();
                let freePercent=$(this).find("input[name='freePercent']").val();
                let rule={};
                rule["period"]=period;
                rule["freePercent"]=freePercent;
                if(!period || !freePercent){

                }else{
                    ruleArray.push(rule);
                }

     });