案例表格的创建与编辑

最新推荐文章于 2023-02-06 19:13:34 发布

qq_38068491

最新推荐文章于 2023-02-06 19:13:34 发布

阅读量148

点赞数

本文链接：https://blog.csdn.net/qq_38068491/article/details/83038227

版权

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DOM操作</title>
</head>
<style>
    #detail {
        width: 200px;
        height: 200px;
        border: 1px solid black;
        display: none;
        position: absolute;
        left: 500px;
        top: 300px;
        background: #fff;
    }
</style>

<body>
    标题：<input type="text" id="topic_name" size=60/><br> 内容：
    <input type="text" id="topic_content" size=60/><br> 作者：
    <input type="text" id="author" size=60/><br>
    <button id="saveBtn">保存</button>
    <table id="tab" border=1>
        <tr>
            <th>ID</th>
            <th>帖子名称</th>
            <th>内容预览</th>
            <th>发布时间</th>
            <th>作者</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>25</td>
            <td class="title">ABC</td>
            <td>xxxxxxxx....</td>
            <td>2016-04-15</td>
            <td>LCE</td>
            <td name="option"><a name="detail" href="#" class="val">详细信息</a> <a class="delbtn" href="javascript:;">删除</a></td>
        </tr>
        <table>
            <div id="detail"></div>
</body>

</html>
<script src="public.js"></script>
<script>
    var topic = document.getElementById("topic_name");
    var content = document.getElementById("topic_content");
    var author = document.getElementById("author");
    var btn = document.getElementById("saveBtn");
    var tab = document.getElementById("tab");
    var detail=document.getElementById("detail");
    btn.onclick = function() {
        var topicName = topic.value;
        var contentValue = content.value;
        var authorName = author.value;
        var tr = document.createElement("tr");
        tr.innerHTML = "<td>25</td><td class='title'>" + topicName + "</td><td>" + contentValue + "</td><td>"+dateToString(new Date())+"</td><td>" + authorName + "</td><td name='option'><a name='detail' href='#' class='val'>详细信息</a> <a class='delbtn' href='javascript:;'>删除</a></td>";
        tab.appendChild(tr);
    }

    tab.onclick = function(e) {
        var e = e || event;
        var target = e.target || e.srcElement;
        if (target.className == "delbtn" && target.tagName == "A") {
            target.parentNode.parentNode.remove();
        }
        if (target.name == "detail") {
        	e.stopPropagation();
           detail.style.display="block";
           detail.style.top=e.pageY+"px";
           detail.style.left=e.pageX+"px";
           detail.innerHTML=target.parentNode.parentNode.children[2].innerHTML;
           
        }
        if (target.tagName == "TD"&&target.name!="option") {
            var inp = document.createElement("input");
            inp.value=target.innerHTML;
            target.innerHTML=""; 
            target.appendChild(inp);
            inp.focus();
            inp.onblur = function() {
                target.innerHTML = this.value;
            }
        }
    }
    document.onclick=function(){
    	detail.style.display="none";
    }
</script>

qq_38068491

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
案例表格的创建与编辑

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;DOM操作&lt;/title&gt;&lt;/head&gt;
复制链接

扫一扫