html的table实现双击打开编辑框,失去焦点保存

最新推荐文章于 2023-04-11 17:25:12 发布

weixin_33970449

最新推荐文章于 2023-04-11 17:25:12 发布

阅读量363

点赞数

原文链接：https://my.oschina.net/u/2331760/blog/1806054

版权

2019独角兽企业重金招聘Python工程师标准>>>

html:

<td ondblclick="zdyEditTableCell(this,'<s:property value="#l.id"/>','sums')"><s:property value="#l.sums" /></td>

JS:

/**
 * html的table双击打开编辑框(原始的table的单元格td的ondblclick事件)
 * @param element 表格的td
 * @param id 指标indexItems的id值
 * @param field 表示的是indexItems的哪个属性值被修改
 */
function zdyEditTableCell(element, id,field) {
	if(id <= 0){
		return false;
	}
    var oldhtml = $.trim($(element).text());//原单元格里的值
    var str = "<input type='text' class='edit' name='test' style='width:90%' onblur='inputBlurFun(this,"+id+",\""+field+"\","+oldhtml+");' value='"+oldhtml+"'/>";
    
    $(element).text('');
    $(element).append(str);
    $(element).find('input[name="test"]').focus();
    $(element).find('input[name="test"]')[0].select();
}

/**
 * html的table的单元格失去焦点事件
 * @param input input输入框
 * @param id 指标indexItems的id值
 * @param field 表示的是indexItems的哪个属性值被修改
 * @param oldhtml 原值
 * @returns {Boolean}
 */
function inputBlurFun(input,id,field,oldhtml){
    var text = $(input).val();
    $(input).text(text);
  //移除新增加的input元素
    var td = $(input).parent('td');
    $(input).remove();
    td.text(text);
    if(oldhtml == text){
    	//如果值没有被改变,则不修改
    	var uid = $(this).attr('uid');
		changePrevFun(td,text,uid,false);
    	return false;
    }
    var url="./iface/changeIndexItems";
    var data = {};
    data['indexItemsObject.id'] = id;
    data['indexItemsObject.'+field+''] = text;
    data['id'] = eprjInfoId;
	$.post(url,data,function(data){
		var obj = eval("("+data+")");
		if(obj.returnCode == 1){
			$.easyui.messager.show({ icon: "info", msg: obj.message, position: "topCenter" ,timeout:3000}); 
			return false;
		}
		$.easyui.messager.show({ icon: "info", msg: obj.message, position: "topCenter" ,timeout:3000}); 
		 return false;
	});
    return false;
}

转载于:https://my.oschina.net/u/2331760/blog/1806054