实现可编辑单元格(使用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实现可以编辑的表格 。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!