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实现可以编辑的表格 。