Jquery雙擊實現編輯文字框,ajax傳遞引數
阿新 • • 發佈:2019-01-28
可以下載Demo,包含springMVC的後臺如何操作資料庫
需要修改的文字框
<td width="260" ondblclick="edit(this,'username')">hello</td>
ondblclick()函式
<script type="text/javascript">
//雙擊實現編輯文字框(attrName為要修改的屬性名)
function edit(obj,attrName){
var oldHtml = obj.innerHTML;//原單元格里面的值
var newobj = document.createElement('input' );//建立節點
newobj.name = attrName;
newobj.type = "text";
newobj.value = oldHtml;
obj.innerHTML = '';
obj.appendChild(newobj);//把新的值賦到單元格
newobj.focus(); //獲取焦點
//給文字框新增失焦事件
$(newobj).blur (function(){//不能newobj.blur=function(){}
if(this.value==null || this.value=="" ){//排除文字框為null時的情況
obj.innerHTML = oldHtml;//不填值時返回原值
return false;
}
obj.innerHTML = this.value?this.value:oldHtml;//當觸發時判斷新增元素值是否為空,為空則不修改,返回原有值
var userId = $("#userId").val();//需要傳遞的使用者id
//向資料庫傳值,修改資料庫資訊
if(oldHtml != this.value){//值改變時才更新,不是(obj.innerHTML!=this.value),這樣的話結果一樣
$.ajax({
type:"post",
url:"changeUser.form",
dataType:"json",
data:{"attrName":attrName,"newHtml":this.value,"userId":userId},
error:function(){
},
success:function(){
},
});
}
})
}
</script>
簡單描述dao層的sql語句
public void changeUser(@Param("attrName") String attrName,@Param("newHtml") String newHtml,@Param("id") int id);
xml的sql語句
<update id="changeUser">
update t_user set ${attrName}=${newHtml} where id=${id}
</update>