实现可编辑单元格(使用Ajax完成后台交互)。


function editableTable(className){
	var name = $("."+className);
	name.click(function () {    
	//找到当前鼠标单击的td  
	var tdObj = $(this);  
	//保存原来的文本  
	var oldText = $(this).text();  
	//创建一个文本框  
	var inputObj = $("<input type='text' value='" + oldText + "'/>");  
	//去掉文本框的边框  
	inputObj.css("border-width", 0);  
	inputObj.click(function () {  
		return false;  
	});  
	//使文本框的宽度和td的宽度相同  
	 inputObj.width(tdObj.width());  
	inputObj.height(tdObj.height()); 
	//去掉文本框的外边距  
	/* inputObj.css("margin", 0);  
	inputObj.css("padding", 0);  
	inputObj.css("text-align", "center");   */
	inputObj.css("font-size", "12px");  
	inputObj.css("background-color", tdObj.css("background-color"));  
	//把文本框放到td中  
	tdObj.html(inputObj);  
	//文本框失去焦点的时候 ajax请求后台,完成数据交互,并将input框变更为文本  
	inputObj.blur(function () {
		var date=tdObj.attr("month")+""+tdObj.attr("date");
		var index=Number(tdObj.attr("date"));
		var employeeCode=tdObj.attr("employeeCode");
		var dateType=tdObj.attr("dateType");
		var newText = $(this).val();
		var numPo=/^\d+(\.\d+)?$/;
		var space = /^\s*$/;
		if(! space.test(newText)){
			if(!numPo.test(newText)){
				$("#update1Alert span").text("工作时长输入不合法");
	    		$("#update1Alert").removeClass("hidden");
	    		return false;
			}
		}else{
			newText="0.00";
		}
		var url="";
		var params="employeeCode="+employeeCode+"&dateId="+date+"&newHour="+newText;
		if(dateType=='infactdayHour'){
			url="${requestContext.contextPath}/rest/manhaur/updateInfactHour";
		}else{
			url="${requestContext.contextPath}/rest/manhaur/updateInInfactExtra";
		}
		$.ajax({
	        type: "POST",
	        async : false,
	        data : params,
	        url: url,
	        dataType: "json",
	        success: function(respData){
	        	var data = respData.data;
	        	/* alert(data.status); */
	        	if(data.status){
	        		/* alert(111); */
	        		tdObj.html(data.newHourD); 
	        		inputObj.css("font-size", "12px");  
	        		//tdObj.html(data.newGap); 
	        		$("#gapDayHour"+index+"t"+employeeCode).html(data.newGap);
	        	}else{
	        		/* alert(2221); */
	        		alert(data.message);
	        		tdObj.html(oldText);
	        	}
	        }
		});       
	});  
	//全选  
	  inputObj.trigger("focus").trigger("select");  
});  
}

实现代码如上图所示,其实就是在点击td的时候,将文本用输入框代替。然后在失焦的时候恢复成文本状态,如此而已。

代码实现借鉴网上文章: JQuery实现可以编辑的表格 。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值