JavaScript关于DOM操作的一些小问题（3）

题目:动态创建的表格有删除功能，可以删除表格中的某一项
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table{border-collapse:collapse;margin: 20px auto;}/*合并单元格之间的边框 */
        #box tr{border: 1px solid black;height: 30px;}
        #box td{border: 1px solid black;width:70px;text-align: center;}
        input{width: 100px;}
    </style>
</head>
<body>
    <!-- 输入框 -->
    <input type="text" class="txt1">
    <input type="text" class="txt2">
    <input type="text" class="txt3">
    <input type="button" id="btn" value="提交">
    <!-- 表格 -->
    <table cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody class="box">

        </tbody>
    </table>
</body>
<script>

    // 动态创建的表格有删除功能，可以删除表格中的某一项

    //获取tbody
    var oBox = document.querySelector(".box");
    //获取输入框文本属性
    var oTxt1 = document.querySelector(".txt1");
    var oTxt2 = document.querySelector(".txt2");
    var oTxt3 = document.querySelector(".txt3");
    //获取提交按钮
    var obtn = document.getElementById("btn");
    
    obtn.onclick = function(){
        //创建td
        var td1 = document.createElement("td");
        var td2 = document.createElement("td");
        var td3 = document.createElement("td");
        var td4 = document.createElement("td");
        //设置td内容
        td1.innerHTML = oTxt1.value;
        td2.innerHTML = oTxt2.value;
        td3.innerHTML = oTxt3.value;
        td4.innerHTML = "删除";
        //创建tr
        var tr = document.createElement("tr");
        //td插入tr
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);
        //插入tr
        oBox.appendChild(tr);
        //删除操作
        td4.onclick = function(){
            tr.remove();
        }
        
    }

</script>
</html>
posted on 2020-05-14 10:28 Huskie! 阅读(239) 评论(0) 收藏举报