留言板功能 - 掘金

<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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 300px;
        }
        td{
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="box">
        <table border=1 cellspacing="0">
            <tr>
                <td>姓名</td>
                <td>内容</td>
                <td>删除</td>
            </tr>
            <tr>
                <td>王一</td>
                <td>今天天气不错</td>
                <td>
                    <button onclick="remove(this)">删除</button>
                </td>
            </tr>
        </table>
        姓名:<input type="text" id="bt2">
        <br>
        内容<textarea name="" id="bt3" cols="30" rows="10"></textarea>
        <button id="bt1">发表</button>
    </div>
    <script>
        var bt1=document.getElementById("bt1");
        bt1.onclick=function(){
            var bt2=document.getElementById("bt2");
            var bt3=document.getElementById("bt3");
            //获取到内容
            var uname=bt2.value;
            //获取到内容
            var content=bt3.value;

            // 创建一个tr标签
            var CreateTr=document.createElement("tr");

            // 创建第一个td标签
            var CreateTd1=document.createElement("td");
            // 让新创建的第一个td中的内容等于输入的姓名
            CreateTd1.innerHTML=uname;
            CreateTr.appendChild(CreateTd1);

            //创建第二个td标签
            var CreateTd2=document.createElement("td");
            // 让新创建的第二个td中的内容等于输入的内容
            CreateTd2.innerHTML=content;
            CreateTr.appendChild(CreateTd2);

            var CreateTd3=document.createElement("td");
            CreateTd3.innerHTML="<button onclick='remove(this)'>删除</button>"
            CreateTr.appendChild(CreateTd3);

            var table=document.getElementsByTagName("table")[0];
            table.appendChild(CreateTr);

            bt2.value="";
            bt3.value=""
        }

        function remove(dom){
            var par=dom.parentNode.parentNode;
            var table=par.parentNode;
            table.removeChild(par);
        }
        // bt1.onclick=function(){
        //     这个里面的this指的是bt1
        // }

        // function remove(){

        // }
        // 将这个函数添加到标签中调用的话，this指的是windo,需要在函数中传入一个参数，然后再标签中
        // 添加时参数为this，这时的this才是指的是自己
    </script>
</body>
</html>