zoukankan      html  css  js  c++  java
  • 鼠标双击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>
    

    
    
  • 相关阅读:
    sudo
    Ansible模块
    Ansible自动化运维
    Sersync
    eclipse报错MA
    myeclipse报错MA
    通过StringBuilder的reverse()实现倒序
    位运算实现高效互换
    scanf("%s",s)与gets(s)
    异或运算符实现简单加密
  • 原文地址:https://www.cnblogs.com/dcrenl/p/3365191.html
Copyright © 2011-2022 走看看