createElement的应用

原生js表单生成列表实现原理

这里用到的一些方法有

insertBefore()

createElement()

appendChild()

removeChild()

and so on~~

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            section {
                width: 800px;
                height: 550px;
                padding: 80px;
                padding-bottom: 30px;
                box-sizing: border-box;
                margin: 50px auto;
                background-size: 100%;
                background-color: skyblue;
            }

            .head {
                background: #FFFFFF;
                height: 150px;
                padding: 50px;
                box-sizing: border-box;
                border-radius: 20px;
                margin-bottom: 30px;
            }

            input,
            select {
                margin: 0;
                padding: 0;
                color: #87DAF8;
                font-weight: bold;
                border: none;
                outline: none;
                background-color: transparent;
            }

            label {
                font-weight: bold;
                color: #000000;
                float: left;
                margin-left: 30px;
                margin-bottom: 10px;
            }

            label .add {
                width: 160px;
                height: 30px;
                margin-left: 40px;
                padding-left: 0;
                background-color: #2ec2fe;
                border-radius: 15px;
                color: #ffffff;
                cursor: pointer;
            }

            label>input {
                width: 160px;
                height: 30px;
                padding-left: 20px;
                box-sizing: border-box;
                border-radius: 15px;
                border: 1px solid #87DAF8;
            }

            select {
                height: 30px;
                padding-left: 20px;
                box-sizing: border-box;
                border-radius: 15px;
                border: 1px solid #87DAF8;
            }

            option {
                display: inline-block;
                float: left;
                padding: 5px;
            }

            .list {
                font: 16px/26px "微软雅黑";
            }

            .list div {
                float: left;
            }

            .choose_box {
                padding-right: 60px;
            }

            .ID_box {
                padding-right: 60px;
            }

            .name_box {
                padding-right: 60px;
            }

            .age_box {
                padding-right: 60px;
            }

            .sex_box {
                width: 161px;
            }

            .list dt {
                height: 30px;
                padding-left: 20px;
                padding-top: 3px;
                border-radius: 5px;
                box-sizing: border-box;
                background-color: #3A95AE;
                margin-bottom: 5px;
                color: #FFFFFF;
            }

            .choose,
            .choose1 {
                display: inline-block;
                vertical-align: middle;
                width: 13px;
                height: 13px;
                border: 1px solid #87DAF8;
            }

            dd {
                margin: 0;
                margin-bottom: 5px;
                height: 30px;
                color: #87DAF8;
                font-weight: bold;
                padding-left: 20px;
                padding-top: 3px;
                border-radius: 5px;
                box-sizing: border-box;
                background-color: #FFFFFF;
            }

            dd>div:nth-of-type(1) {
                width: 85px;
            }

            dd>div:nth-of-type(2) {
                width: 62px;
                text-align: center;
                height:100%;
                overflow: hidden;
            }

            dd>div:nth-of-type(3) {
                width: 117px;
                text-align: center;
                height:100%;
                overflow: hidden;
            }

            dd>div:nth-of-type(4) {
                width: 77px;
                text-align: center;
                height:100%;
                overflow: hidden;
            }

            dd>div:nth-of-type(5) {
                width: 102px;
                text-align: center;
            }

            dd>div:nth-of-type(6) {
                width: 160px;
                text-align: center;
            }

            strong {
                padding-left: 10px;
                padding-right: 10px;
                cursor: pointer;
            }
        </style>
        <script>
            window.onload = function() {
                /*
                 *
                 * 1：获取姓名，年龄，性别输入框
                 * 2：点击添加按钮判断内容是否符合规范
                 * 3：点击添加按钮生成list列表
                 * 4：点击选择框按钮事件
                 * 5：点击上移下移按钮事件
                 * 6：点击删除按钮事件
                 *
                 * */
                //1：获取姓名，年龄，性别输入框
                var user = $('#user');
                var age = $('#age');
                var add = $('#add');
                var sex = $('.sex_box')[0];
                var select1 = $('select')[0];
                var choose1 = $('.choose1')[0];
                var list = $('dl')[0]
                var choose = document.getElementsByTagName('em');
                var strong = document.getElementsByTagName('strong');
                var num = 0;
                var count = 0
                add.onclick = function() {
                    //2：点击添加按钮判断内容是否符合规范
                    if(user.value == '') { //姓名框不能为空
                        alert('别闹~~快输入姓名')
                    } else if(age.value == '' || typeof(Number(age.value)) !== 'number') { //年龄框必须输入数字
                        alert('自己多大心里没数啊？')
//                    else if(sex.value){
//                        alert('不好意思选女博士？？')
                    }else {
                        //这里面处理生成下面的列表
                        var dd = document.createElement('dd');
                        num++; //每次生成一组数据 前面的序号加1
                        dd.innerHTML = '<div>' +
                            '<em class="choose"></em>' +
                            '</div>' +
                            '<div class="num">' + num + '</div>' +
                            '<div>' + user.value + '</div>' +
                            '<div>' + age.value + '</div>' +
                            '<div>' + sex.value + '</div>' +
                            '<div>' +
                            '<strong>↑</strong>' +
                            '<strong>↓</strong>' +
                            '<strong>X</strong>' +
                            '</div>'
                        //3：点击添加按钮生成list列表
                        list.appendChild(dd)
                        user.value = '';
                        age.value = '';
                        //当全选按钮选择后再次添加新的列表内容 就取全选按钮的状态
                        choose1.style.backgroundColor = '';
                        list_choose();
                        handle();
                    }
                }

                //4：点击选择框按钮事件
                choose1.onclick = function() { //处理全选按钮
                    if(!this.state){//这里初始状态必须是默认null。也就是假的状态，如果设置初始状态在点击添加按钮时会改变这个按钮的状态。
                        this.style.backgroundColor = '#FFB20F';//改变状态
                        for(var i = 0; i < choose.length; i++) {//给所有列表项添加选中状态
                            choose[i].style.backgroundColor = '#FFB20F';
                            choose[i].state = true;//注意改变所有列表项的状态
                            count=choose.length;//还要注意改变计数的值
                        }
                        this.state=true;
                    }else{
                        this.style.backgroundColor = '';//同上
                        for(var i = 0; i < choose.length; i++) {//同上
                            choose[i].style.backgroundColor = '';//同上
                            choose[i].state = false;//同上
                            count=0;//同上
                        }
                        this.state=false;
                    }
                }
                function list_choose() {//处理列表项选择框的选择按钮状态
                    for(var i = 0; i < choose.length; i++) {
                        choose[i].onclick = function() {
                            if(!this.state){//这里的this.state为默认值underfind，不可以在点击是设置一个state的状态，否则在点击添加按钮的时候会改变这个状态
                                this.style.backgroundColor = '#FFB20F';
                                this.state = true;//改变状态
                                count++;//计数+1
                            }else{
                                this.style.backgroundColor = '';
                                this.state = false;//改变状态
                                count--;//计数-1
                                choose1.style.backgroundColor = '';//改变全选按钮的状态
                                choose1.state = false;//改变全选按钮的状态
                            }
                            if(count==choose.length){//当列表项全都是true的状态时，让全选按钮变为选中状态
                                choose1.style.backgroundColor = '#FFB20F';
                                choose1.state=true;
                            }
                        }
                    }
                }

                //5：点击上移下移按钮事件
                function handle(){
                    var dl = document.querySelector('dl')
                    var dd = document.querySelectorAll('dd')
                    if(strong.length>0){//这里判断是否存在strong。不加先判断的话会报错
                        for(var i=0;i<strong.length;i++){//循环所有的strong
                            if(i%3==0){//这里的这个i%3==0判断的是每个dd里的第一个strong；
                                strong[i].onclick = function(){
                                    //判断点击向上移动的时候如果是dl的第一个列表项就不再往上移动了
                                    if(this.parentNode.parentNode.previousElementSibling==dl.firstElementChild){
                                        alert('已经第一个了')
                                        return;
                                    }
                                    //这里是让点击的这个列表项移动到他的上一个元素前面
                                    list.insertBefore(this.parentNode.parentNode, this.parentNode.parentNode.previousElementSibling);
                                    sort();//然后重新把id序号更改过来
                                }
                            }
                            if(i%3==1){//这里的这个i%3==1判断的是每个dd里的第二个strong；
                                strong[i].onclick = function(){
                                    //判断点击向下移动的时候如果是dl的最后一个列表项就不再往下移动了
                                    if(!this.parentNode.parentNode.nextElementSibling){
                                        alert('已经最后一个了')
                                        return;
                                    }
                                    //这里是让点击的这个列表项移动到他的下一个元素后面
                                    list.insertBefore(this.parentNode.parentNode, this.parentNode.parentNode.nextElementSibling.nextElementSibling);
                                    sort();//然后重新把id序号更改过来
                                }
                            }
                            if(i%3==2){//这里的这个i%3==2判断的是每个dd里的第三个strong；
                                strong[i].onclick = function(){
                                    list.removeChild(this.parentNode.parentNode);
                                    sort();
                                    var choose = document.querySelectorAll('.choose')
                                    if(this.parentNode.parentNode.firstElementChild.firstElementChild.state==true){
                                        count--;//注意这里每删掉一个列表项时要把选择按钮的计数更改-1。
                                    }
                                    if(count==choose.length){//当列表项全都是true的状态时，让全选按钮变为选中状态
                                        choose1.style.backgroundColor = '#FFB20F';
                                        choose1.state=true;
                                    }

                                }
                            }
                        }
                    }
                }
                //处理列表项上下移动的时候ID序号不变
                function sort(){
                    var num = document.querySelectorAll('.num');
                        for(var i=0;i<num.length;i++){
                            num[i].innerHTML = i+1
                        }
                }
/*
* 获取元素集合
* */
function $(str){

    var dom;//储存找到的元素

    if(str.charAt(0)=='.'){
        dom = document.getElementsByClassName(str.slice(1));

    }else if(str.charAt(0)=='#'){
        dom = document.getElementById(str.slice(1));
    }else{
        dom = document.getElementsByTagName(str);
    }

    return dom;//把获取到的元素给到需要用的人
}
            }
        </script>
    </head>

    <body>
        <section>
            <div class="head">
                <form action="">
                    <label for="user">
                        姓名: <input id="user" type="text" value="" />
                        </label>
                    <label for="age">
                        年龄: <input id="age" type="number" value="" />
                    </label>
                    <label for="sex_box">
                        性别: <select class="sex_box" id="sex_box" name="sex">
                                <option value="女">女</option>
                                <option value="男">男</option>
                                <option value="女博士">女博士 </option>
                            </select>
                    </label>
                    <label for="add ">
                           <input class="add" id="add" type="button" value="添 加" />
                       </label>
                </form>
            </div>
            <dl class="list">
                <dt>
                    <div class="choose_box">
                        <span class="choose1"></span>
                        <span>全选</span>
                    </div>
                    <div class="ID_box">
                        <span>ID</span>
                    </div>
                    <div class="name_box">
                        <span>姓名</span>
                    </div>
                    <div class="age_box">
                        <span>年龄</span>
                    </div>
                    <div style="width:135px;" class="sex_box">
                        <span>性别</span>
                    </div>
                    <div class="handle_box">
                        <span>操作</span>
                    </div>
                </dt>
                <!--<dd>
                    <div>
                        <span class="choose"></span>
                    </div>
                    <div>1</div>
                    <div>多多</div>
                    <div>80</div>
                    <div>男</div>
                    <div>
                        <strong>↑</strong>
                        <strong>↓</strong>
                        <strong>X</strong>
                    </div>
                </dd>
                <dd>
                    <div>
                        <span class="choose"></span>
                    </div>
                    <div>2</div>
                    <div>强强</div>
                    <div>8</div>
                    <div>未知</div>
                    <div>
                        <strong>↑</strong>
                        <strong>↓</strong>
                        <strong>X</strong>
                    </div>
                </dd>
                <dd>
                    <div>
                        <span class="choose"></span>
                    </div>
                    <div>3</div>
                    <div>飞飞</div>
                    <div>18</div>
                    <div>男</div>
                    <div>
                        <strong>↑</strong>
                        <strong>↓</strong>
                        <strong>X</strong>
                    </div>
                </dd>-->
            </dl>
        </section>

    </body>

</html>

效果图如下：