1,表格新增行:
function add(){//新增行
var rows = document.getElementById("filterGridAdd").rows.length-1;
var re = "${WPFilter}";
var line = "<tr><td align=\"center\"><input type=\"checkbox\" οnclick=\"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);//5
var 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>"); */
}
}
});
}
}
以上源码都是自己工作中编写的,比较基础常见。