jQuery动态创建表单示例

最近做了个动态创建表单，添加记录，想到jQuery，就用上了，现共享如下。

1.js方法
function addSetting(){
var mytbody=jQuery('#evaluatetable').find('tbody');
//var firstTr = jQuery('#evaluatetable').find('tbody>tr:first');
var firstTr = mytbody.find('tr:first');
var row=jQuery('<TR></TR>');
row.insertBefore(firstTr);
var td=jQuery('<TD></TD>')
td.append('<input name="evachk" type="checkbox" value="neweva"/>');
var td2=jQuery('<TD></TD>')
td2.append('<input name="guidelineName" class="width200" type="text" value=""/>');
var td3=jQuery('<TD></TD>')
td3.append('<input name="purvalue" class="width100" type="text" value=""/>');
var td4=jQuery('<TD></TD>')
td4.append('<a class="sexybutton" href="#" οnclick="saveSetting();"><span><span>保存</span></span></a>');
row.append(td);
row.append(td2);
row.append(td3);
row.append(td4);
if(firstTr.attr('id')=='noRecord'){
firstTr.hide();
}
}

function reduceSetting(){
var checks= jQuery('input[name=evachk]:checked');
if(checks.length==0){
alert('请选定要删除的项');
return false;
}

checks.each(function(){
if(this.value=='neweva'){
var trow= this.parentElement.parentElement;
jQuery(trow).remove();
}
});
if(jQuery('#evaluatetable').find('tbody>tr').length==1){
jQuery('#noRecord').show();
}
}

</script>
2.页面元素
[align=center]没有指标设置</td>
</tr>
</logic:empty>
<logic:notEmpty name="list" >
<logic:iterate id="eva" name="list" >
<tr class="odd" οnmοuseοver="this.className='highlight'" οnmοuseοut="this.className='odd'">
<td><input name="evachk" type="checkbox" value="${eva.guidelineId}" /></td>
<td>${eva.guidelineName}</td>
<td>${eva.purValue}</td>
<td><a class="sexybutton" href="#" οnclick="editSetting('${eva.guidelineId}');"><span><span>编辑</span></span></a></td>
</tr>
</logic:iterate>
</logic:notEmpty>
</tbody>
</table>
[list=1]
<li class="listyle_4">
<a class="sexybutton left" href="#" οnclick="addSetting();"><span><span>增加项</span></span></a>
<a class="sexybutton left" href="#" οnclick="showReduce();"><span><span>删除项</span></span></a>
</li>
[/list]
[/align]
<!--ol 表格结束-->
</fieldset>
</form>
</div>

<!--框内内容 结束-->
</div>
<!--主体 结束-->
</div>