实现效果:动态添加一行控件
html页面中的代码
- <div id="filterDiv">
- <div id="div1">
- <input id="inputPropertyName1" value="MetricName" />
- <input id="inputOperation1" value="contains" />
- <input id="filterValue1" />
- </div>
- </div>
- <button id="filter">Filter</button>
- <button id="add">Add</button>
- <button id="reset">Reset</button>
jqury代码
- $("#filter").click(function () {
- for (var i = 1; i <= filterNum; i++) {
- if ($("#filterValue" + i).val() == null || $("#filterValue" + i).val() == "") {
- alert($("#filterValue" + i).val());
- continue;
- }
- else {
- if ($("#inputPropertyName" + i).val() == "MetricId") {
- dataSource.filter({
- field: $("#inputPropertyName" + i).val(),
- operator: $("#inputOperation" + i).val(),
- value: parseInt($("#filterValue" + i).val())
- });
- }
- else {
- dataSource.filter({
- field: $("#inputPropertyName" + i).val(),
- operator: $("#inputOperation" + i).val(),
- value: $("#filterValue" + i).val()
- });
- }
- }
- }
- });
- $("#add").click(function () {
- filterNum++;
- var newDiv = document.createElement('div');
- var str = "<input id='inputPropertyName" + filterNum + "' value='MetricName' /><input id='inputOperation" + filterNum + "' value='contains' /><input id='filterValue" + filterNum + "' /><input id='delItem'" + filterNum + " οnclick='delItem(" + filterNum + ");' value='删除此项' type='button' />";
- newDiv.innerHTML = str;
- newDiv.setAttribute("Id", "div" + filterNum);
- $("#filterDiv").append(newDiv);
- });
- $("#reset").click(function () {
- dataSource.filter({
- field: "MetricName",
- operator: "contains",
- value: ""
- });
- });
删除的jquery
- function delItem(i) {
- $("#div" + i).remove();
- }