js 表格添加和删除，（节点的添加和删除）

最新推荐文章于 2023-03-14 22:36:28 发布

海龟先生plus

最新推荐文章于 2023-03-14 22:36:28 发布

阅读量1.2k

点赞数

分类专栏： js 文章标签： js表格（节点添加和删除）

本文链接：https://blog.csdn.net/qq_45219069/article/details/94403050

版权

js 专栏收录该内容

70 篇文章 1 订阅

订阅专栏

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190701184530547.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MjE5MDY5,size_16,color_FFFFFF,t_70)
   <style>
        #box{
            width: 800px;
            height: 300px;
            margin: 50px auto;
            border: 1px solid;
        }
        #box .box2{
            height: 25px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
        }
        #box .box2 input:nth-child(5){
            width: 80px;
        }
        #tab{
           width: 100%;
           border: 1px solid red;
          text-align: center;
        }
        #tab th{
            border: 1px solid red;
        }
        #tab td{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="box2">
            <input type="text" value="">
            <input type="text" value="">
            <input type="text" value="">
            <input type="text" value="">
            <input type="button" value="添加">
        </div>
        <div>
            <table id="tab">
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>专业</th>
                    <th>操作</th>
                </tr>
            </table>
        </div>
    </div>
    <script>
        var box2=document.querySelector(".box2")//获取box2
        var inputs=box2.children;               //获取box2所有的孩子
        var tab=document.querySelector("#tab")

        //给按钮绑定事件
        inputs[4].onclick=function(){
            for(var i=0;i<inputs.length;i++){   //为空时不能输入，需要判断四个input框，所以用个遍历
                if(inputs[i].value==""){
                    alert("不能为空，小老弟")
                    return false
                }
            }
             //在tab中添加行和列
        var tr=document.createElement("tr")     //要先创建一个子节点
        tab.appendChild(tr)                     //再添加到父节点下
        //添加列，顺便把input获取的值付给它，注意innerHTML                                     
        var td1=document.createElement("td")
        td1.innerHTML=inputs[0].value  
         tr.appendChild(td1)
        
         var td2=document.createElement("td")
        td2.innerHTML=inputs[1].value  
         tr.appendChild(td2)

         var td3=document.createElement("td")
        td3.innerHTML=inputs[2].value  
         tr.appendChild(td3)

         var td4=document.createElement("td")
        td4.innerHTML=inputs[3].value  
         tr.appendChild(td4)

         var td5=document.createElement("td")
        td5.innerHTML="<span>删除</span>"
         tr.appendChild(td5)

            var span=document.querySelectorAll("span")
            
            for(var i=0;i<span.length;i++){
                span[i].onclick=function(){             //要删除添加的某一个span
                    this.parentNode.parentNode.remove() //删除它父元素的父元素，事件在循环内部
                }
            }
           
            clear()
        }
       
    function clear(){
        for(var i=0;i<inputs.length-1;i++){
            inputs[i].value=""
        }
    }
        

    </script>
</body>
</html>

海龟先生plus

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js 表格添加和删除，（节点的添加和删除）

<style> #box{ width: 800px; height: 300px; margin: 50px auto; border: 1px solid; } #box .box2{ height: 25px...
复制链接

扫一扫