关于jquery实现动态的增加删除条件拼串组合

当进行复杂查询，或者限定条件时，常用到动态的增加、删除条件 来拼串(样式见附件)。下面我们来代码实现附件的功能

1.大（或）条件的增加
var rowNum= 0;
var subRowNum=1;
function addTotalCondition(tableName){
++rowNum;
var option = "";
var rowHtml="";
var url = "";
var key = "";
rowHtml +="<tr id='"+ "tr_subCondition"+ "_" +rowNum+"' name=\"tr_subCondition\">";
rowHtml +="<td ><input type=\"checkbox\" id=\"checkbox\" name=\"checkboxSubCondition\"  /></td>";
rowHtml +="<td>";
rowHtml +="<table id=\"table_subCondition_"+ rowNum +"\"  name=\"table_subCondition\" >";
rowHtml +="<tr>";
rowHtml +="<td><input  style=\"width: 25px\" class=\"btn-common\"  type=\"button\" value=\"+\" id=\"btn_add_condition_"+ rowNum +"\" name=\"btn_add_condition_"+ rowNum +"\" onclick=\"addCondition("+rowNum+","+subRowNum+")\" /> </td>";

rowHtml +="<td><input style=\"width: 25px\" class=\"btn-common\"  type=\"button\" value=\"-\" id=\"btn_add_condition_"+ rowNum +"\" name=\"btn_del_condition_"+ rowNum +"\" onclick=\"delCondition("+rowNum+")\" /></td>";
rowHtml +="<td>";
rowHtml +="<table id=\"table_condition_"+ rowNum +"\"  name=\"table_condition\" >";
rowHtml +="<tr>";
rowHtml +="<td><input type=\"checkbox\" id=\"checkbox_"+ rowNum +"\" name=\"checkboxCondition\"  /></td>";
rowHtml +="<td><span>查询项目<span></td>";
rowHtml +="<td>";
url = $.WEB_ROOT +'/platform/codelist/queryByKey.do';
key = 'WIKICT';
var selectkey = "01";
option = getComboboxOptions(url , key ,selectkey);
rowHtml +="<select id=\"limitProjectId_" + rowNum +"_" + subRowNum +"\"   name=\"limitProjectIds\"> "+ option+ " </select><input type=\"text\" id=\"textvalue\"";
rowHtml +="</td>";
rowHtml +="</tr>";
// rowHtml +="</table >";
rowHtml +="</td>";
rowHtml +="</tr>";
rowHtml +="</table >";
rowHtml +="</td>";
rowHtml +="</tr>";
//alert(rowHtml)
$("#"+tableName).append(rowHtml);
}

2.大(或)条件的删除

var delTotalCondition = function(tableName) {
var flag = true;
$("#"+tableName+" tr[id^='tr_subCondition']").each(function() {
//debugger;
if ($(this).find("#checkbox").get(0).checked == true) {
flag = false;
}
});

if(flag){
$.alert('请选择要删除子条件');

}else{
$("#"+tableName+" tr[id^='tr_subCondition']").each(function() {
//debugger;
if ($(this).find("#checkbox").get(0).checked == true) {
$(this).remove();
}
});
}
};

3.下拉列表框的初始化实现
function getComboboxOptions(url, codeListKey,selectkey) {
var str = "";
$.ajax( {
type : "POST",
async : false,
dataType : "json",
url : url,
data : jQuery.param( {
key : codeListKey //传递Key值
}, true),

success : function(data) {//创建<option></option>

$.each(data.codeList, function(i, n) {
if(selectkey!=null&&data.codeList[i].key==selectkey){//检测到需要默认设置的value，并设置为selected
str += "<option value='"+
data.codeList[i].key
+ "' selected='selected' >" +//默认设置
data.codeList[i].value
+"</option>";
}else{
str += "<option value='"+
data.codeList[i].key
+ "'>" + //一般设置
data.codeList[i].value
+"</option>";
}

});

}
});
return str;
}

4.小(且)条件的新增

var subRowCount = 0
var addCondition = function(rowNum,index) {
if(subRowCount == 0){
subRowCount = index;
++subRowCount;
}else{
++subRowCount;
}
var rowHtml="";
var url="";
var key="";
var selectkey="";
var option="";
rowHtml +="<tr>";
rowHtml +="<td>";
rowHtml +="<input type=\"checkbox\" id=\"checkbox_"+ rowNum +"\" name=\"checkboxCondition\"  />";
rowHtml +="</td>";
rowHtml +="<td>";
rowHtml +="<span>限定项目<span>";
rowHtml +="</td>";
rowHtml +="<td>";
url = $.WEB_ROOT +'/platform/codelist/queryByKey.do';
key = 'WIKICT';
selectkey = "01";
option = getComboboxOptions(url , key ,selectkey);
rowHtml +="<select id=\"limitProjectId_" + rowNum +"_" + subRowCount +"\" name=\"limitProjectIds\"> "+option+" <select><input type=\"text\" id=\"textValue\">";
rowHtml +="</td>";
rowHtml +="</tr>";

$("#table_condition_" +rowNum).append(rowHtml);


}

5.小(且)条件的删除

var delCondition = function(obj) {
var flag = true;
$("#table_condition_"+ obj +" tr").each(function() {
if ($(this).find("input[id^='checkbox_']").get(0).checked == true) {
flag = false;
}
});
if(flag){
$.alert('请选择要删除的限定项目1111');

}else{
$("#table_condition_"+ obj +" tr").each(function() {
if ($(this).find("input[id^='checkbox_']").get(0).checked == true) {
$(this).remove();
}
});
}
}