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="#" onclick="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.页面元素

没有指标设置</td>
                </tr>
                </logic:empty>
                <logic:notEmpty name="list" >
                <logic:iterate id="eva" name="list" >
                 <tr class="odd" onmouseover="this.className='highlight'" onmouseout="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="#" onclick="editSetting('${eva.guidelineId}');"><span><span>编辑</span></span></a></td>
                </tr>
                </logic:iterate>
                </logic:notEmpty>
             </tbody>
            </table>
          

        <li class="listyle_4">
                      <a class="sexybutton left" href="#" onclick="addSetting();"><span><span>增加项</span></span></a>
                      <a class="sexybutton left" href="#" onclick="showReduce();"><span><span>删除项</span></span></a>
              </li>
          

       

                <!--ol 表格结束--> 
            </fieldset>
            </form>
            </div>
           
            <!--框内内容 结束-->
        </div>
    <!--主体 结束-->
</div>