HTML table implements double-click to open the edit box, lose focus and save

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;
}

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325185062&siteId=291194637