原生js表格即时编辑

Posted 2021-01-08 yunshangwuyou

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js表格即时编辑相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
姓名：<input type="text" id="usename"><br>
性别：<input type="text" id="content"><br>
作者：<input type="text" id="author"><br>
<button id="btn">保存</button>
<table border=1 id="tab" >
    <th>序列号</th>
    <th>用户名</th>
    <th>性别</th>
    <th>作者</th>
    <th>时间</th>
    <th>详细内容</th>
    <th>删除</th>
    <tr>
    <td>24</td><td>kaw</td><td>男</td>
    <td>牛批</td><td>2018-05-17</td><td>
    <a href="#">详细内容</a></td><td><a href="#" class="del">删除</a></td></tr>
    <tr><td>24</td><td>kaw</td><td>男</td><td>牛批</td><td>2018-05-17</td><td>
    <a href="#">详细内容</a></td><td><a href="#" class="del">删除</a></td></tr>
    <tr><td>24</td><td>kaw</td><td>男</td><td>牛批</td><td>2018-05-17</td><td>
   <a href="#">详细内容</a></td><td><a href="#" class="del">删除</a></td></tr>    
</table>
</body>
</html>
<script src="pool.js"></script>
<script>
    var _name=document.getElementById("usename");
    var content=document.getElementById("content");
    var author=document.getElementById("author");
    var obtn=document.getElementById("btn");
    var otab=document.getElementById("tab");
    otab.style.borderSpacing="0"
    obtn.onclick=function(){
        var d=new Date();
        var oname=_name.value;
        var ocontent=content.value;
        var oauthor=author.value;
        var str=‘‘;
        str+="<tr><td>"+numRandom(1,100)+"</td><td>"+oname+"</td><td>"+ocontent+"
</td><td>"+oauthor+"</td><td>"+dateString(d)+"</td><td>
<a href=‘#‘>详细内容</a></td><td><a href=‘#‘ class=‘del‘>删除</a></td></tr>"
        otab.innerHTML+=str;
    }
    otab.onclick=function(e){
        var e=e||event;
        var target= e.target|| e.srcElement;
        if(target.tagName=="A" && target.className=="del"){
            target.parentNode.parentNode.remove();
        }
        if(target.tagName=="TD" && target.tagName!="A"){
            var input=document.createElement("input");
            input.type="text";
            input.value=target.innerHTML;
            target.replaceChild(input,target.firstChild);
            input.onblur=function(){
                this.parentNode.value=this.value;
                this.style.border="none"
              
            }
        }
    }

</script>

以上是关于原生js表格即时编辑的主要内容，如果未能解决你的问题，请参考以下文章