JavaScript之DOM综合应用练习

最新推荐文章于 2022-11-04 13:00:00 发布

置顶 chfangfang

最新推荐文章于 2022-11-04 13:00:00 发布

阅读量814

点赞数

分类专栏： JavaScript 文章标签： DOM javascript 动态表格设计

本文链接：https://blog.csdn.net/qq_38274324/article/details/79844128

版权

JavaScript 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

效果图：
这里写图片描述

实现代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>dcoument综合练习</title>
    <link rel="stylesheet" href="">
    <style type="text/css">
    *{
        margin: 0 auto;
    }
    hr{
        margin: 10px;
    }
    div{
        width: 500px;
        border: 1px solid #c7cbd1;
    }
</style>
<!--  -->
<script type="text/javascript">
    var _id=1;//全局变量id
    //删除某个元素按钮事件
    function deletes(id){
        //获取父元素的对象
        var tbodys=document.getElementsByTagName("tbody")[0];
        //获取tr的元素
        var trs=tbodys.getElementsByTagName("tr");
        //删除指定的行
        tbodys.removeChild(trs[id]);
        //将被删除后的行的id进行更改
        for (var i = id; i < trs.length; i++) {
            //先获取每行的最后一个单元格元素，在获取该单元格的孩子元素，
            trs[i].lastChild.firstChild.setAttribute("href","javascript:deletes("+i+")");
        }
        //每删除一个记录总记录的id就减一
        _id--;
    }

    //删除选中的全部记录的方法
    function deleteall(){

        //获取父元素的对象
        var tbodys=document.getElementsByTagName("tbody")[0];
        //获取th的元素
        var ths=tbodys.getElementsByTagName("th");
        alert(ths.length);
        //遍历th元素的数组
        //需要从后往前删除，如果是从前向后删除则会每次只删除一条记录
        for (var i = ths.length-1; i >=0; i--) {
            if (ths[i].firstChild.checked==true) {
                tbodys.removeChild(ths[i].parentNode);
            }
        }
        //将被删除后的行的id进行更改
        for (var i = 0; i < ths.length; i++) {
            //从第一个元素进行遍历，对每一个元素都进行更改
            ths[i].parentNode.lastChild.firstChild.setAttribute("href","javascript:deletes("+i+")");        
        }
        //设置全局变量id的值为数组长度的值；为添加记录做铺垫
        _id=ths.length;
    }
    //全部选中的方法
    function selectall(){
        alert("okokoko");
        //获取父元素的对象
        var tbodys=document.getElementsByTagName("tbody")[0];
        //获取th的元素
        var ths=tbodys.getElementsByTagName("th");
        //利用for循环实现状态的改变（存在一缺点：在点击前选中的选项会变为未选中状态）
        for(var i=0;i<ths.length;i++){
            //判断是否为选中状态
            if(ths[i].firstChild.checked==true){
                ths[i].firstChild.checked=false;
            }else{
                ths[i].firstChild.checked=true;
            }
        }

    }
    window.onload=function(){

        //添加人员信息的方法：
        var _into=document.getElementById("into").onclick=function(){
            //获取填写数据并验证是否符合要求！！
            var _code=document.getElementById("code").value;
            var _name=document.getElementById("name").value;
            var _pass=document.getElementById("pass").value;
            var _ages=document.getElementById("ages").value;
            var _adress=document.getElementById("adress").value;
            var message="";//错误信息
            var floag=1;//开关变量
            if(isNaN(_code)){
                message+="编号不可以为空或非数字形式\n";
                floag=0;//改变开关变量的状态
            }
            if(!/^[0-9A-Za-z]{8,12}$/.test(_pass)){
                alert("no");
                message+="密码为字母数字的8-12位组合\n";
                floag=0;
            }
            if(!/^[0-9]{2,3}$/.test(_ages)){
                message+="年龄不合法！\n"
                floag=0;
            }

            if(floag==0){
                alert(message);
            }else{
                //获取第一个tbody对象
                var _tbody=document.getElementsByTagName("tbody")[0];
                //创建tr元素
                var _tr=document.createElement("tr");
                //创建td元素
                var _td0=document.createElement("th");
                var _newcheck=document.createElement("input");
                //设置input元素的属性为CheckBox
                _newcheck.setAttribute("type","checkbox");
                _newcheck.setAttribute("id",_id);//设置CheckBox的id属性
                //将input元素添加到单元格中
                _td0.appendChild(_newcheck);

                var _td1=document.createElement("td");
                //添加单元格的文本元素
                _td1.innerHTML=_code;
                var _td2=document.createElement("td");
                _td2.innerHTML=_name;
                var _td3=document.createElement("td");
                _td3.innerHTML=_pass;
                var _td4=document.createElement("td");
                _td4.innerHTML=_ages;
                var _td5=document.createElement("td");
                _td5.innerHTML=_adress;
                var _td6=document.createElement("td");
                var _newa=document.createElement("a");
                //添加超链接的事件属性
                var x=1;
                _newa.setAttribute("href","javascript:deletes("+_id+")");
                _newa.innerHTML="删除";
                _td6.appendChild(_newa);

                //将td添加到tr中
                _tr.appendChild(_td0);
                _tr.appendChild(_td1);
                _tr.appendChild(_td2);
                _tr.appendChild(_td3);
                _tr.appendChild(_td4);
                _tr.appendChild(_td5);
                _tr.appendChild(_td6);

                //将tr添加到tbody中
                _tbody.appendChild(_tr);
                _id++;//全局变量id++
                //每次添加完后需要调用重置的方法将输入框内容置空

            }
        }
        //重置按钮的事件方法：
        document.getElementById("resert").onclick=function(){
            document.getElementById("code").value="";
            document.getElementById("name").value="";
            document.getElementById("pass").value="";
            document.getElementById("ages").value="";
            document.getElementById("adress").value="";         
        }       
    }
</script>
</head>
<body>
    <div>

        <table border="1">
            <caption>人员信息表</caption>
            <thead>
                <tr>
                    <th>选中</th>
                    <th>编号</th>
                    <th>用户</th>
                    <th>密码</th>
                    <th>年龄</th>
                    <th>住址</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <th><input type="checkbox" name="checkall" onchange="selectall()"></th>
                    <th colspan="6" align="center">
                        <a href="javascript:deleteall()">全部删除</a>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th><input type="checkbox" id="0"></th>
                    <td>001</td>
                    <td>admin</td>
                    <td>root</td>
                    <td>41</td>
                    <td>香港九龙湾</td>
                    <td><a href="javascript:deletes(0)">删除</a></td>
                </tr>
            </tbody>
        </table>
        <hr border="2"/>
        <table border="1" cellspacing="0">
            <caption>添加人员信息</caption>
            <tbody>
                <tr>
                    <th>编号：</th>
                    <td><input type="text" id="code"></td>
                </tr>
                <tr>
                    <th>用户：</th>
                    <td><input type="text" id="name"></td>
                </tr>
                <tr>
                    <th>密码：</th>
                    <td><input type="text" id="pass"></td>
                </tr>
                <tr>
                    <th>年龄：</th>
                    <td><input type="text" id="ages"></td>
                </tr>
                <tr>
                    <th>住址：</th>
                    <td><input type="text" id="adress"></td>
                </tr>

            </tbody>
            <tfoot>
                <tr>
                    <th colspan="7">
                        <button type="button" id="resert">重置</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <button type="button" id="into">添加</button>
                    </th>
                </tr>
            </tfoot>

        </table>

    </div>
</body>
</html>

chfangfang

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
JavaScript之DOM综合应用练习

效果图：实现代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt
复制链接

扫一扫