添加删除

最新推荐文章于 2022-05-31 22:36:22 发布

上冬二十二

最新推荐文章于 2022-05-31 22:36:22 发布

阅读量89

点赞数

本文链接：https://blog.csdn.net/qq_44941776/article/details/114459902

版权

练手专栏收录该内容

5 篇文章 0 订阅

订阅专栏

添加删除简单应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        table{
            margin-top: 50px;
            margin-left: 650px;
            border: 1px solid black;
            border-collapse: collapse;
        }
        #t1 tr td{
            text-align: center;
            border: 1px solid black;
            height: 30px;
        }
        #end{
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <table id="t1">
            <tr>
                <td>Name</td>
                <td>Emile</td>
                <td></td>
            </tr>

            <tr>
                <td>Tom</td>
                <td>111@tom.com</td>
                <td><a href="#">delete</a></td>
            </tr>
            
            <tr>
                <td>Jim</td>
                <td>222@jim.com</td>
                <td><a href="#">delete</a></td>
            </tr>

            <tr>
                <td>Jack</td>
                <td>333@jack.com</td>
                <td><a href="#">delete</a></td>
            </tr>
        </table>
        <table>
            <tr>
                <td>
                    Name:
                </td>
                <td>
                    <input type="text" id="inp1">
                </td>
            </tr>

            <tr>
                <td>
                    Emile:
                </td>
                <td>
                    <input type="text" id="inp2">
                </td>
            </tr>

            <tr>
                <td colspan="2" id="end">
                    <button id="btn" style="width: 100px;">
                        创建
                    </button>    
                </td>
                <td>
                </td>        
            </tr>
        </table>
    </div>
    <script>
        function fun(){
        var a = document.getElementsByTagName("a");
            for(var i=0;i<a.length;i++){
                a[i].onclick = function(){
                    //用this来代替当前函数对象
                    var tr = this.parentNode.parentNode;
                    var name = tr.children[0].innerHTML;
                    var c = confirm("是否删除当前用户"+name+"?");
                    if(c){
                    tr.parentNode.removeChild(tr);
                    }
                    return false;
            }
        }
    }
        window.onload = function(){
            //调用函数fun事件
            fun();
            //添加元素
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            //获取元素
            var tr = document.createElement("tr");
            var inp1 = document.getElementById("inp1").value;
            var inp2 = document.getElementById("inp2").value;

            //获取文本
            
            tr.innerHTML = "<td>"+inp1+"</td>"+
                            "<td>"+inp2+"</td>"+
                            "<td><a href = '#'>delete</a></td>";
            var a = tr.getElementsByTagName("a")[0];
            a.onclick = fun;
            //拼接
            var tbody = document.getElementsByTagName("table")[0].lastChild;
            tbody.appendChild(tr);
        }
    }
    </script>
</body>
</html>

上冬二十二

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
添加删除

添加删除简单应用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
复制链接

扫一扫