jquery动态添加Div

实现效果：动态添加一行控件

html页面中的代码

[html] view plaincopy

1. <div id="filterDiv">  
2.            <div id="div1">  
3.                 <input id="inputPropertyName1" value="MetricName" />  
4.                 <input id="inputOperation1" value="contains" />  
5.                 <input id="filterValue1" />  
6.            </div>      
7.       </div>  
8.         <button id="filter">Filter</button>  
9.         <button id="add">Add</button>  
10.         <button id="reset">Reset</button>  

jqury代码

[javascript] view plaincopy

1. $("#filter").click(function () {  
2.                 for (var i = 1; i <= filterNum; i++) {  
3.                     if ($("#filterValue" + i).val() == null || $("#filterValue" + i).val() == "") {  
4.                         alert($("#filterValue" + i).val());  
5.                         continue;  
6.                     }  
7.                     else {  
8.                         if ($("#inputPropertyName" + i).val() == "MetricId") {  
9.                             dataSource.filter({  
10.                                 field: $("#inputPropertyName" + i).val(),  
11.                                 operator: $("#inputOperation" + i).val(),  
12.                                 value: parseInt($("#filterValue" + i).val())  
13.                             });  
14.                         }  
15.                         else {  
16.                             dataSource.filter({  
17.                                 field: $("#inputPropertyName" + i).val(),  
18.                                 operator: $("#inputOperation" + i).val(),  
19.                                 value: $("#filterValue" + i).val()  
20.                             });  
21.                         }  
22.                     }  
23.                 }  
24.   
25.             });  
26.   
27.   
28.             $("#add").click(function () {  
29.                 filterNum++;  
30.                 var newDiv = document.createElement('div');  
31.                 var str = "<input id='inputPropertyName" + filterNum + "' value='MetricName' /><input id='inputOperation" + filterNum + "' value='contains' /><input id='filterValue" + filterNum + "' /><input id='delItem'" + filterNum + " onclick='delItem(" + filterNum + ");' value='删除此项' type='button' />";  
32.                 newDiv.innerHTML = str;  
33.                 newDiv.setAttribute("Id", "div" + filterNum);  
34.                 $("#filterDiv").append(newDiv);  
35.             });  
36.   
37.   
38.             $("#reset").click(function () {  
39.                 dataSource.filter({  
40.                     field: "MetricName",  
41.                     operator: "contains",  
42.                     value: ""  
43.                 });  
44.             });  

删除的jquery

[javascript] view plaincopy

1. function delItem(i) {  
2.                $("#div" + i).remove();  
3.            }