jQuery动态创建表单示例

转载网址：http://fsh430623.iteye.com/blog/1144937

最近做了个动态创建表单，添加记录，想到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.页面元素

/*

<logic:empty name="" property="sesUserName">
</logic:empty>
这个标签判断参数如果是空,计算BODY值
<logic: notEmpty name="" property="sesUserName">
</logic:notEmpty>
这个标签判断参数如果不是空,计算BODY值

<logic:iterate id="msg" name="list" scope="request">
list为要迭代的对象组。
msg为当前本循环对象
request是从请求中取LIST

<c:forEach items="list" var="msg" ></c:forEach>

*/

没有指标设置</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>