JS学习基础第六天之DOM作业

1、全选/全不选

要求如下

1）当点击全选时，所有的选项都被勾选
2）当点击取消时，所有被勾选的选项都被取消

代码如下

<div id="box1">
        <input type="checkbox" name="" onclick="allElection()">全选/全不选
    </div>
    <div id="box">
        <input type="checkbox" name="election" id="">JavaScript
        <input type="checkbox" name="election" id="">Java<br>
        <input type="checkbox" name="election" id="">python
        <input type="checkbox" name="election" id="">JavaWeb
    </div>
    <script>
        /*
    1.实现全选/全不选功能
    */
        var quanXuan = document.getElementById("box1").children[0];//找到全选/全不选的按钮
        var election = document.getElementById("box").children;//找到选项


        function allElection() {
            for (var i = 0, len = election.length; i < len; i++) {//循环找到所有的复选框中的选项
                election[i].checked = quanXuan.checked;//将所有的选项都和全选/全不选按钮保持一致
            }
        }
    </script>

待解决的问题

当选项都被勾选时，全选框应被勾选；但由于学习知识不够的原因尚无法解决。

2、根据输入的行和列数值，创建对应行列的表格

要求如下

1）当输入行数和列数时，点击创建表格就应该创出相应的表格
2）应创出相应的th标签

难点

1）创建th
2）循环创出td
3）逻辑嵌套
引申：向创出的表格内输入数据

代码如下

 行数：<input type="text" id="tx1">
    列数：<input type="text" id="tx2">
    <button id="btn">创建表格</button>

    <script>
        //创建表格的点击事件
        btn.onclick = function () {
            var rowNum = document.getElementById('tx1').value; //获取行数的值
            var colNum = document.getElementById('tx2').value; //获取单元格的值
            var btn = document.getElementById('btn'); //找到按钮
            // rowNum = rowNum.value;
            // colNum = colNum.value;
            // console.log(rowNum, colNum, btn)
            //判断行数和列数都要大于0
            if (rowNum > 0 && colNum > 0) {
                //创建table标签
                var tab = document.createElement('table');
                //将table标签显示到HTML
                document.body.appendChild(tab);
                //创建thead标签
                var tab_the = document.createElement('thead');
                //将thead标签显示在table标签内
                tab.appendChild(tab_the);
                //创建tr标签
                var the_tr = document.createElement('tr');
                //将tr标签显示在thead标签内
                tab_the.appendChild(the_tr);
                //创建多个th标签
                for (var i = 0; i < colNum; i++) {
                    //创建一个th标签
                    var the_th = document.createElement('th');
                    //将th标签显示在thead标签的tr标签内
                    the_tr.appendChild(the_th);
                }
                //创建tbody标签
                var tab_tbo = document.createElement('tbody');
                //将tbody标签显示在table标签内
                tab.appendChild(tab_tbo);
                //创建多个tbody标签的tr标签
                for (var i = 0; i < rowNum; i++) {
                    //创建一个tr标签
                    var tbo_tr = document.createElement("tr");
                    //将创建的tr标签显示在tbody标签中
                    tab_tbo.appendChild(tbo_tr);
                    //创建多个td单元格
                    for (var j = 0; j < colNum; j++) {
                        //创建一个td单元格
                        var tbo_td = document.createElement("td");
                        //将td标签现实在tr标签中
                        tbo_tr.appendChild(tbo_td);
                    }
                }
            }

        }
    </script>

3、根据姓名、ID、年龄输入框的值

要求如下

1）创建对应的表格
   
2）点击删除按钮，删除对应的行

难点如下

1）创建表头（th）
2）增加表格
3）增加表格时，再次传值
4）删除操作

代码如下

<style>
        table {
            text-align: center;
        }

        td,
        th {
            /* margin: 8px 10px; */
            padding: 4px 10px;
        }
    </style>
    ID号：<input type="text" id="tx1">
    姓名：<input type="text" id="tx2">
    年龄：<input type="text" id="tx3">
    <button id="tx4">创建表格</button>
    <button id="tx5">增添表格</button>
    <script>
        function getEle(id) {
            return document.getElementById(id)
        }
        var num1 = getEle('tx1'); //获取ID
        var sName = getEle('tx2'); //获取姓名
        var age = getEle("tx3") //获取年龄
        var btn = getEle("tx4"); //创建表格
        var btn1 = getEle("tx5");//增添表格
        //1.创建表格对象
        var tab = document.createElement('table');
        //2.创条thead
        var tHead = document.createElement('thead');
        //3.创建表头行
        var th_tr = createTR('ID', '姓名', "年龄", '操作', 'th');
        btn.onclick = function () {
            num1 = num1.value; //获取ID的值
            sName = sName.value; //获取名字的值
            age = age.value; //获取年龄的值


            //将行放入thead中
            tHead.appendChild(th_tr);
            //将thead放入表格中
            tab.appendChild(tHead);

            //5.创建表格内容行
            //5-1 创建tbody
            var tBody = document.createElement('tbody');
            //5-2 创建内容行
            var tr1 = createTR(num1, sName, age, "<a href='#' οnclick='del(this)'>删除</a>", 'td');

            //将行插入tbody
            tBody.appendChild(tr1);
            //将tobody插入表格中
            tab.appendChild(tBody);

            //最后
            document.body.appendChild(tab);

            //增添表格
            btn1.onclick = function () {
               var num1 = getEle('tx1').value;
               var sName = getEle('tx2').value;
               var age = getEle('tx3').value;
                console.log(num1);
                //5-2 创建内容行
                var tr1 = createTR(num1, sName, age, "<a href='#' οnclick='del(this)'>删除</a>", 'td');

                //将行插入tbody
                tBody.appendChild(tr1);
                //将tobody插入表格中
                tab.appendChild(tBody);
            }

        }


        //创建行
        function createTR(id, sName, age, op, tag) {
            var tr = document.createElement('tr');
            // 创建内容列
            var td1 = createCell(tag, id); //id
            var td2 = createCell(tag, sName); //姓名
            var td3 = createCell(tag, age); //年龄
            var td4 = createCell(tag, op);

            //将列加入行内
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            tr.appendChild(td4);

            return tr; //返回创建的行
        }

        //创建列  td,th
        function createCell(tag, cnt) {
            var td = document.createElement(tag);
            td.innerHTML = cnt;
            return td;
        }

        //删除事件
        function del(obj) {
            // alert(obj);
            // console.log(obj);//a
            var tr = obj.parentNode.parentNode;
            tr.parentNode.removeChild(tr);
        }
    </script>

4、实现幻灯片效果

要求如下

每隔2秒钟，切换一张图片

难点如下

1）找到图片
2）改变图片的路径
3）计时操作（函数的调用）

代码如下

<style>
        img {
            width: 500px;
            margin: 100px 30%;
        }
    </style>

    <img src="images/1.jpg" alt="">
    <script>
        //找到img
        var pic = document.images;
        //定义计数器
        var n = 1;
        // console.log(pic[0].src);//查看图片地址
        function slide() {
            if (n != 6) {
                pic[0].src = "images/" + n + ".jpg";
            } else {
                n = 0;
            }
            n++;
            // console.log(n);
            setTimeout(slide, 2000)
        }
        slide();
    </script>