js即使编辑的表格

最新推荐文章于 2024-09-09 11:22:31 发布

原创最新推荐文章于 2024-09-09 11:22:31 发布 · 125 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #html #css

js 专栏收录该内容

45 篇文章

订阅专栏

保存对代码的热爱，并保存怀疑态度
主要运用的是dom创建元素，然后放入指定位置，取值然后把值放到表格中
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>Document</title>
</head>
<body>
    <table width=800 border="1" >
        <tr>
            <td>
                date
            </td>
            <td>
                date
            </td>
            <td>
               date
            </td>
        </tr>
        <tr>
            <td>
                date
            </td>
            <td>
                date
            </td>
            <td>
               date
            </td>
        </tr>
        <tr>
            <td>
                date
            </td>
            <td>
                date
            </td>
            <td>
               date
            </td>
        </tr>
    </table>
</body>
<script>
    //事件委托
    var otable=document.querySelector("table");
    otable.onclick=function(eve){
        var e=eve ||window.event;
        var tar= e.target || e.srcElement;
        if(tar.tagName==="TD"){
            var inpu=document.createElement("input"); //创建input输入框
            inpu.value=tar.innerHTML;  //赋值
            tar.innerHTML="";  //清空原来td 的值
            tar.appendChild(inpu);   //把input框房间

            inpu.onblur=function(){  //失去焦点
                tar.innerHTML=this.value   //把inp的值放到td里
            }
        }

    }
    </script>
</html>