javascript代码如下:
//获得初始文本,设置为隐藏,然后判断是否已有输入域,如果没有则创建输入框
function hiddenEle(id) {
var titleP = document.getElementById("item_" + id);
titleP.style.display = "none";
if (!document.getElementById("title_input_" + id)) {
buildEditDiv(titleP.parentNode, id);
}
}
//创建输入框和保存按钮
function buildEditDiv(titleDiv, id) {
var editText = document.createElement("input");
var titleP = document.getElementById("item_" + id);
var oldTitle = titleP.firstChild.data;
editText.setAttribute("class", "newItemTitle");
editText.setAttribute("type", "text");
editText.value = oldTitle;
editText.name = id;
editText.id = "title_input_" + id;
titleDiv.appendChild(editText);
var submitButton = document.createElement("button");
submitButton.appendChild(document.createTextNode("保存"));
submitButton.id = "title_button_" + id;
submitButton.onclick = function () {
ajaxChangeTitle(id, oldTitle, editText.value);
return false;
}
//这里输入框失去焦点后,设置了等待时间200ms才执行删除input和button操作,主要是为了在删除input之前,在button的onclick动作中能获得input的新值。
editText.onblur = function () {
setTimeout(function () {
titleDiv.removeChild(submitButton);
titleDiv.removeChild(titleDiv.lastChild);
titleDiv.removeChild(editText);
titleP.style.display = "";
}, 200);
}
titleDiv.appendChild(submitButton);
editText.focus();
}
function ajaxChangeTitle(id, oldTitle, newTitle) {
var titleP = document.getElementById("item_" + id);
titleP.firstChild.data = newTitle;
if(newTitle!=null && newTitle!="")
{
if(oldTitle!=newTitle)
{
editClub(id,newTitle);
}
}
else {
alert("不能为空");
window.location.reload();
}
}
function showBgColor(ele) {
ele.setAttribute("class", "itemTitleBg_c");
}
function hiddenBgColor(ele) {
ele.setAttribute("class", "itemTitleBg");
}
function showEle(id)
{
var titleP = document.getElementById("item_" + id);
if (document.getElementById("title_input_" + id)) {
var text = document.createElement("span");
text.value= titleP.firstChild.data ;
var titleDiv = titleP.parentNode;
titleDiv.appendChild(text);
}
}
function editClub(id,newTitle)
{
var str =id+','+newTitle;
//alert(str);
clubDwr.updateClub(str,editClubResult);
}
function editClubResult(result)
{
if(result==1)
{
// alert("编辑成功");
}
else if(result ==0)
{
alert("该名称已经存在");
window.location.reload();
}
else if(result == -1)
{
alert("未知错误");
window.location.reload();
}
}
<script type='text/javascript' src='./leedwr/engine.js'> </script>
<script type='text/javascript' src='./leedwr/util.js'></script>
<script type='text/javascript' src='./leedwr/interface/clubDwr.js'></script>
<script type='text/javascript' src="js/dwr/clubDwr.js"></script>
<td class="bottom_line" align="left" width="60%"> <span id="item_<s:property value="id"/>" class="itemTitleBg" οnmοuseοver="showBgColor(this)"
οnmοuseοut="hiddenBgColor(this),showEle('<s:property value="id"/>')" title="编辑" οnclick="hiddenEle('<s:property value="id"/>');" > <s:property value="name"/></span>
</td>