前端之家收集整理的这篇文章主要介绍了
实现可编辑单元格(使用Ajax完成后台交互)。，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_
301_0@
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实现可以编辑的表格 。
