DOM：js实现放大框实时输入（盒子阴影），按钮增删，表格增删改查（遮罩效果，表格设置边框）

拾歡

已于 2022-08-11 21:40:38 修改

阅读量351

点赞数

文章标签： javascript 前端 html

于 2022-07-07 19:21:16 首次发布

本文链接：https://blog.csdn.net/qq_45926448/article/details/125656003

版权

1.放大框实时输入

盒子阴影的实现：

box-shadow: 0 0 10px black;

CSS —— 盒子阴影（box-shadow）_ZhaoYLi的博客-CSDN博客_盒子阴影

使用单伪元素给上方盒子添加三角图标

.mask::before{
            content: "";
            border: solid 10px transparent;
            border-top-color: black;
            position: absolute;
            top: 30px;
            left: 20px;
        }

    <style>
        .box{
            position: relative;
            top: 200px;
            left: 200px;
        }
        .mask {
            display: none;
            position: absolute;
            top: -42px;
            left: -12px;
            width: 200px;
            line-height: 30px;
            height: 30px;
            box-shadow: 0 0 10px black;
        }
        .mask::before{
            content: "";
            border: solid 10px transparent;
            border-top-color: black;
            position: absolute;
            top: 30px;
            left: 20px;
        }
    </style>

    <div class="box">
        <input type="text" id="ipt">
        <div class="mask" id="mask"></div>
    </div>
    <script>
        ipt.onfocus = function () {
            mask.style.display = "block";
        }
        ipt.onblur = function () {
            mask.style.display = "none";
        }
        ipt.oninput = function () {
            mask.textContent = this.value;
        }
    </script>

2.按钮的增删

利用冒泡 事件的代理与委托方便找到其父节点对其进行删除操作

main.onclick = function () {

if(event.target.className === "del"){

// 1

// event.target.parentElement.remove();

// 2.

main.removeChild(event.target.parentElement);

}

}

3.表格增删改

遮罩效果：

        .mask {

            display: none;
            justify-content: center;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .box {

            display: flex;
            justify-content: center;
            align-items: center;
            flex-flow: column wrap;
            width: 300px;
            height: 250px;
            background: gray;
        }

 <div class="mask">
        <div class="box"></div>
    </div>

表格里边设置边框：

       th,
        td {
            border: solid 1px red;
        }

        table {
            width: 800px;
            /* 折叠边框 */
            border-collapse: collapse;
            text-align: center;
        }

 <style>
        th,
        td {
            border: solid 1px red;
        }

        table {
            width: 800px;
            /* 折叠边框 */
            border-collapse: collapse;
            text-align: center;
        }

        .mask {

            display: none;
            justify-content: center;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .box {

            display: flex;
            justify-content: center;
            align-items: center;
            flex-flow: column wrap;
            width: 300px;
            height: 250px;
            background: gray;
        }
    </style>


<body>
    <div>
        <input type="text" class="name">
        <input type="text" class="phone">
        <button class="add">添加</button>
        <br>
        <table class="table">
            <tr>
                <th>姓名</th>
                <th>电话</th>
                <th>操作</th>
            </tr>
        </table>
    </div>

    <div class="mask">
        <div class="box">
            <div>
                名字:<input type="text" class="uname">
            </div>
            <div>
                电话:<input type="text" class="uphone">
            </div>
            <div>
                <button class="cancle">取消</button>
                <button class="confirm">确定</button>
            </div>
        </div>
    </div>


    <script>
        function $(selector) {
            return document.querySelector(selector);
        }
        var nameIpt = $(".name");
        var phoneIpt = $(".phone");
        var unameIpt = $(".uname");
        var uphoneIpt = $(".uphone");
        var cancleBtn = $(".cancle");
        var confirmBtn = $(".confirm");
        var table = $(".table");
        var addBtn = $(".add");
        var mask = $(".mask");

        addBtn.onclick = function () {
            if (nameIpt.value && phoneIpt.value) {
                table.innerHTML += `
                    <tr>
                        <td>${nameIpt.value}</td>
                        <td>${phoneIpt.value}</td>
                        <td>
                            <button class="del">删除</button>
                            <button class="update">更新</button>    
                        </td>

                    </tr>
                `;
                nameIpt.value = "";
                phoneIpt.value = "";
            }
            else {
                alert("请输入name 和 电话");
            }
        }

        var tr = null; // 记录当前选中的元素
        // 冒泡
        table.onclick = function () {
            // 删除
            if (event.target.className == "del") {
                event.target.parentElement.parentElement.remove();
            }
            // 更新
            if (event.target.className == "update") {
                mask.style.display = "flex";
                // 点击了修改的tr
                tr = event.target.parentElement.parentElement;
                unameIpt.value = tr.children[0].textContent;
                uphoneIpt.value = tr.children[1].textContent;

            }
        }

        confirmBtn.onclick = function () {
            mask.style.display = "none";
            tr.children[0].textContent = unameIpt.value;
            tr.children[1].textContent = uphoneIpt.value;
        }

        cancleBtn.onclick = function () {
            mask.style.display = "none";

        }

    </script>
</body>