鼠标双击Table单元格变成文本框

<html>

<head>

<title>网页特效 双击鼠标修改表格内容</title>

</head>

<body>

<script language="javascript">

// 将单元格转化成文本框

function changeTotext(obj)

{ 

    var tdValue = obj.innerText;

    obj.innerText = "";

    var txt = document.createElement("input");

    txt.type = "text";

    txt.value = tdValue;

    txt.id = "_text_000000000_";

    txt.setAttribute("className","text");

    obj.appendChild(txt);

    txt.select();

    //obj.style.border = "1px dashed #ff9900";

}

 // 取消单元格中的文本框,并将文本框中的值赋给单元格

function cancel(obj)

{

    var txtValue = document.getElementById("_text_000000000_").value;

    obj.innerText = txtValue;

}

/*********************************************/

// 事件

document.ondblclick = function()

{

    if (event.srcElement.tagName.toLowerCase() == "td")

    {

        changeTotext(event.srcElement);

    }

}

document.onmouseup = function()

{

    if (document.getElementById("_text_000000000_") && event.srcElement.id != "_text_000000000_")

    {

        var obj = document.getElementById("_text_000000000_").parentElement;

        cancel(obj);

    }

} 

</script>

<table width="50%" border="0" align="center" cellpadding="0" cellspacing="0">

  <tr>

    <td>测试内容</td>

  </tr>

</table>

</body>

</html>



你可能感兴趣的:(table)