//添加拦截点
$("#J_add").on("click",function(){
var table =document.getElementById("J_tab");
var num = table.rows.length;
var A_tr = '<tr id="intereceptTr'+num+'"><td width="50" class="tab_cen border_down">'+num+'</td><td class="tab_cen border_down"><div class="form-group"><input id="intereceptMethod'+num+'" name="intereceptMethod'+num+'" type="text" class="inter_input"/></div></td><td width="200" class="tab_cen border_down"><a href="#" class="tablelink" οnclick="deltr(\'intereceptTr'+num+'\')">删除</a></td></tr>';
$("#J_tab").append(A_tr);
//验证
$("#intereceptMethod"+num).rules("add", {
required: true,
maxlength: 200,
messages: {
required: "请设置拦截点"
}
});
});
<div class="intergral_tit clearfix"><p>拦截点设置</p><span id="J_add"><a href="#">添加拦截点</a></span></div>
<div class="intergral_tab">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tablelist" id="J_tab">
<tbody>
<tr>
<th width="50" class="tab_cen">序号</th>
<th class="tab_cen">拦截点</th>
<th width="200" class="tab_cen">操作</th>
</tr>
</tbody>
</table>
//****************************************************************************************************************************
//另外一种写法
var row_num = ${empty templateInfo.templateParamInfos?1:fn:length(templateInfo.templateParamInfos)};
function addTemplateParamRow(){
var $paramCode = $('<td class="tab_cen border_down" width="20%"><div class="form-group"><input class="Cfb_wbk" type="text" name="paramCode'+row_num+'" validate="{required:true,maxlength:20,codeValid:true}"></div></td>');
var $paramName = $('<td class="tab_cen border_down" width="20%"><div class="form-group"><input class="Cfb_wbk" type="text" name="paramName'+row_num+'" validate="{required:true,maxlength:20}"></div></td>');
var $defaultValue = $('<td class="tab_cen border_down" width="20%"><div class="form-group"><input class="Cfb_wbk" type="text" name="defaultValue'+row_num+'" validate="{maxlength:20}"></div></td>')
var $mark = $('<td class="tab_cen border_down" width="20%"><div class="form-group"><input class="Cfb_wbk" type="text" name="mark'+row_num+'" validate="{maxlength:50}"></div></td>')
var $delRow = $('<td class="tab_cen border_down"><a href="javascript:void(0)" class="tablelink" οnclick="deleteRow(\'row_'+row_num+'\')">删除</a></td>')
var $tr=$('<tr id="row_'+row_num+'"></tr>');
$tr.append($paramCode);
$tr.append($paramName);
$tr.append($defaultValue);
$tr.append($mark);
$tr.append($delRow);
$("#param_tbody").append($tr);
row_num++;
}
<div class="tab_height">
<table class="tablelist nobar">
<tbody id="param_tbody">
<c:forEach items="${templateInfo.templateParamInfos}" var="ti" varStatus="vs">
<tr id="row_${vs.index }">
<td class="tab_cen" width="20%"><div class="form-group"><input class="fb_wbk" type="text" name="paramCode${vs.index }" value="${ti.paramCode }" validate="{required:true,maxlength:20,codeValid:true}"></div></td>
<td class="tab_cen" width="20%"><div class="form-group"><input class="fb_wbk" type="text" name="paramName${vs.index }" value="${ti.paramName }" validate="{required:true,maxlength:20}"></div></td>
<td class="tab_cen" width="20%"><div class="form-group"><input class="fb_wbk" type="text" name="defaultValue${vs.index }" value="${ti.defaultValue }" validate="{maxlength:20}"></div></td>
<td class="tab_cen" width="20%"><div class="form-group"><input class="fb_wbk" type="text" name="mark${vs.index }" value="${ti.mark }" validate="{maxlength:50}"></div></td>
<td class="tab_cen"><a href="javascript:void(0)" class="tablelink" οnclick="deleteRow('row_${vs.index }')">删除</a></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>