DOM较好例题

最新推荐文章于 2023-01-16 11:15:45 发布

九月上

最新推荐文章于 2023-01-16 11:15:45 发布

阅读量235

点赞数

分类专栏： DOM 文章标签： Dom绘制表格实现删除功能

本文链接：https://blog.csdn.net/weixin_44389868/article/details/86582680

版权

DOM 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.使用DOM绘制表格
2.实现删除功能

<style type="text/css">
	table{width: 500px;border: 1px solid gray;border-collapse: collapse;margin-top: 30px}
	th,td{line-height: 35px;border: 1px solid gray;text-align: center;}
</style>
<body>
<label for="">姓名：</label><input type="text" id="inp1">
<label for="">年龄：</label><input type="text" id="inp2">
<label for="">住址：</label><input type="text" id="inp3">
<button id="butt">添加</button>
<script>
    //获取姓名输入框的id
    var inp1=document.getElementById('inp1');
    //获取年龄输入框的id
    var inp2=document.getElementById('inp2');
    //获取住址输入框的id
    var inp3=document.getElementById('inp3');
    //获取按钮id
    var butt=document.getElementById('butt');
    //添加点击事件
    butt.onclick=function (){
        var a=inp1.value;
        var b=inp2.value;
        var c=inp3.value;
        //判断输入框是否有值
        if(a==''||b==''||c==''){
            alert('请正常输入！谢谢');
            return;
        }
        //获取tr2
        var tr2=getTr2(a,b,c,'删除');
        //追加
        table.appendChild(tr2);
        document.body.appendChild(table);
    }
    //创建table
    var table=document.createElement('table');
    //创建tr1
    function getTr1(){
        var tr1=document.createElement('tr');
        for(j=0;j<arguments.length;j++){
        var th1=getTh(arguments[j]);
        tr1.appendChild(th1);
        }
        return tr1;
    }
    //获取tr1
    var tr1=getTr1('姓名','年龄','住址','操作')
    //追加
    table.appendChild(tr1);
    //创建tr2
    function getTr2(w1,w2,w3,w4){
        var tr2=document.createElement('tr');
        var td1=getTd(w1,false);
        var td2=getTd(w2,false);
        var td3=getTd(w3,false);
        var td4=getTd(w4,true);
        tr2.appendChild(td1);
        tr2.appendChild(td2);
        tr2.appendChild(td3);
        tr2.appendChild(td4);
        return tr2;
    }
    //创建th
    function getTh(sum){
        var th=document.createElement('th');
        th.innerHTML=sum;
        return th;
    }
    //创建td
    function getTd(num,boo){
        var td=document.createElement('td');
        //判断  true 则创建超链接  false 则创建正常td
        if(boo){
            var a1=document.createElement('a');
            a1.href='#';
            a1.innerHTML=num;
            td.appendChild(a1);
            //创建点击事件
            a1.onclick=function (){
                var a2=this.parentNode.parentNode;
                a2.parentNode.removeChild(a2);
            }
        }else{
            td.innerHTML=num;
        }
       
        return td;
    }

</script>

未操作时显示 ![未操作](https://img-blog.csdnimg.cn/20190121191214461.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM4OTg2OA==,size_16,color_FFFFFF,t_70)

若输入框为空则会出现如下结果

若正常操作则显示

操作了删除后显示

九月上

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM较好例题

1.使用DOM绘制表格2.实现删除功能&amp;lt;style type=&quot;text/css&quot;&amp;gt; table{width: 500px;border: 1px solid gray;border-collapse: collapse;margin-top: 30px} th,td{line-height: 35px;border: 1px solid gray;text-align: c...
复制链接

扫一扫