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>
    

    
    
  • 相关阅读:
    greenplum 常用整理
    postgresql 常用整理
    数据源整理
    hive 以like方式建表(携带表结构)
    kudu 常用整理
    mysql常用整理
    Linux查看文件内容的常用方式(more,less,head,tail,cat)
    python2.7 安装docx错误
    python2.7 安装搜索引擎错误
    mysql数据库安装错误
  • 原文地址:https://www.cnblogs.com/dcrenl/p/3365191.html
Copyright © 2011-2022 走看看