表格新增行删除行以及复选框未勾选禁用表格行，以及省市区联动

1，表格新增行：

function add(){//新增行var rows = document.getElementById("filterGridAdd").rows.length-1;var re = "${WPFilter}";var line = "<tr><td align=\"center\"><input type=\"checkbox\" onclick=\"checkSelect2(this)\" name = \"deleteId2\"  maxlength=\"5\" /></td>"+"<td align=\"center\" id='rowId"+document.getElementById("filterGridAdd").rows.length+"'>"+document.getElementById("filterGridAdd").rows.length+"级</td>"+//"<td align=\"center\"><select id=\"filterType\" name=\"filterType\"><option selected=\'selected\' value=\"\">请选择</option>";"<td align=\"center\"><input type=\"text\"  id=\"filterType\" name=\"filterType\"    placeholder=\"请输入滤芯类型\" maxlength=\"50\"/>";/*  $.ajax({url:"api/brandModel/getWPFilterDic",type:'get',cache:false,async: false,success : function(result){ for(var i=0;i<result.length;i++){    line += "<option  value='"+result[i].text +"'>"+result[i].text+"</option>";}}, error: function (result) {         Zfloat("操作失败");         }})  */   line += "</td>"+"<td ><input type=\"text\" pattern=\"\^[0-9]+\$\"  id=\"validTime\" name=\"validTime\" value=\"\" placeholder=\"请输入数字\" maxlength=\"50\"/></td>"+"</tr>";$("#filterGridAdd").append(line);if(rows==7){//最多八行$("#add").attr("disabled",true);    $("#add").removeClass("Mbtn green_a");    $("#add").addClass("Mbtn gray");} }

效果图：

2，删除行：

function dele(){//删除行var rows = document.getElementById("filterGridAdd").rows.length-1;var ids="";$("input[name='deleteId2']:checked").each(function(){ids+=$(this).val+",";})if(ids.length<1){Zfloat("请勾选数据！");}else{$("input[name='deleteId2']:checked").each(function(){$(this).parent().parent().remove();var tempRows = document.getElementById("filterGridAdd").rows.length;//alert(tempRows);//5var nextRow = parseInt($(this).parent().next().text().substring(0,1))+1;//alert(nextRow); for(var i=nextRow;i<=tempRows;i++){//$(this).parent().next().text().substring(0,1);//3//alert($("#rowId"+nextRow).text())$("#rowId"+i).text((i-1)+'级');$("#rowId"+i).attr("id",'rowId'+(i-1)); } //alert($(this).parent().next().text().substring(0,1));})     if(document.getElementById("filterGridAdd").rows.length-1==0){     $("#checkGridAllRows2").attr("checked",false);//TODO中间行重复情况     }if(rows<9){//小于八行$("#add").attr("disabled",false);$("#add").removeClass("Mbtn gray");$("#add").addClass("Mbtn green_a");}}}

3，表格复选框未勾选禁用表格行

$(".checkGridAllRows").click(function(){if($("#startTime2").val()==""){Zfloat("请指定更换日期");}else{if(this.checked==true){$("input[name='checkGridAllRow']").each(function(){var id= this.value;$("#"+id).removeAttr("readonly");$("."+id).removeAttr("disabled");})}else{$("input[name='checkGridAllRow']").each(function(){var id= this.value;$("#"+id).prop("readonly","readonly");$("."+id).prop("disabled","disabled");})}}})$("input[name='checkGridAllRow']").each(function(){$(this).click(function(){if($("#startTime2").val()==""){Zfloat("请指定更换日期");$("input[type='checkbox']").prop("checked",false);}else{if(this.checked==true){var id= this.value;$("#"+id).removeAttr("readonly");//alert($(this).next());$("."+id).removeAttr("disabled");}else{var id= this.value;$("#"+id).prop("readonly","readonly");$("."+id).prop("disabled","disabled");}}})})

效果图：

4，省市区联动初始化：

 $.ajax({url:"api/customerStatis/getAreas",type:'get',data:{type:1},cache:false,success : function(result){$("#province").empty(); //$("#province").append("<option selected='selected'>省</option>");for (var i = 0; i < result.length; i++) {if(result[i].province=="${area.province}"){$("#province").append("<option value='"+ result[i].province+ "' selected = 'selected' >"+result[i].province+"</option>");}else{$("#province").append("<option value='"+ result[i].province+ "'>"+result[i].province+"</option>");}} provinceChange();cityChange();// $("#city").empty(); //$("#area").empty();}})

function provinceChange() {if($("#province").val()=='全国'){$("#city").empty();$("#area").empty();$("#city").append("<option selected='selected'>市</option>");$("#area").append("<option selected='selected'>行政区域</option>");}else{$.ajax({type : 'POST',cache : false,dataType : 'json',url : "api/customerStatis/getAreas",data : {province : $("#province").val(),type:2},async : false,success : function(result) {$("#city").empty();$("#city").append("<option selected='selected'>市</option>");$("#area").empty();$("#area").append("<option selected='selected'>行政区域</option>");for (var i = 0; i < result.length; i++) {if(result[i].city=="${area.city}"){$("#city").append("<option value='"+ result[i].city+ "' selected = 'selected' >"+result[i].city+"</option>");}else{$("#city").append("<option value='"+ result[i].city+ "'>"+result[i].city+"</option>");}/* $("#city").append("<option value='"+ result[i].city+ "'>"+result[i].city+"</option>"); */}}});}}

以上源码都是自己工作中编写的，比较基础常见。