子线程 2020-06-13 16:22 采纳率: 0%
浏览 67

求代码：使用javascript实现功能

使用javasprict实现功能
：添加学生 ，全选，反选，删除
求代码。
图片说明

  • 写回答

1条回答 默认 最新

  • 菜鸟咸鱼一锅端 2020-06-19 16:53
    关注
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态生成表格</title>
    <style>
        table{margin-top:20px;width:800px;border:1px solid #ddd;border-collapse:collapse;}
        td,th{border:1px solid #ddd;padding:5px 10px;}
        td{padding:0;height:30px;}
        td input{width:100%;border:none;background-color:#ffc;}
    </style>
    <script>
        window.onload = function(){
            /*
                动态生成可编辑表格
                    1）生成表格
                        1>序号
                            1-n
                        2>数据
                            根据输入值确定数据
                        3>删除
                            显示删除按钮
                    2）表格编辑
                        1>点击td时,生成一个输入框
                        2>把td的内容赋值给输入框
                        3>把输入框添加到td
                    3）保存编辑
                        把输入框的值写入td
             */

            // 获取页面元素
            var banji = document.getElementById('banji');
            var name = document.getElementById('name');
            var sex = document.getElementById('sex');
            var age = document.getElementById('age');
            var btnSave = document.getElementById('btnSave');
            var tableList = document.getElementById('tableList');
            var tbody = tableList.children[1];
            var all = document.getElementById('all');
            var fx = document.getElementById('fx');
            // 序号
            var index=1;
            var hobby = ''
            // 1）生成表格
            // 点击保存按钮生成表格
            btnSave.onclick = function(){
                // 生成一行
                var tr = document.createElement('tr');

                tr.innerHTML = '<td><input type="checkbox" name="hobby"></td>'+'<td>' + index++ + '</td><td>' + banji.value + '</td><td>' + name.value + '</td><td>' + sex.value + '</td><td>' + age.value + '</td><td><button class="btnDel">删除</td>';

                // 往表格里添加行
                tbody.appendChild(tr);

                hobby = document.getElementsByName('hobby');
                /*// 删除操作
                // 获取删除按钮
                var btnDel = document.getElementsByClassName('btnDel');

                // 绑定点击事件，移除tr
                for(var i=0;i<btnDel.length;i++){
                    btnDel[i].onclick = function(){
                        tbody.removeChild(this.parentNode.parentNode);
                    }
                }*/

            }

            // 事件委托：利用事件冒泡原理
            // 把本来绑定到删除按钮的事件委托给它的父级去处理
            // 目的：减少事件绑定数量，提高页面性能
            tbody.onclick = function(e){
                e = e || window.event;
                var _target = e.target || e.srcElement;
                var tagName = _target.tagName.toLowerCase();

                // 判断是否点击了删除按钮
                // 事件源对象：触发事件的元素
                // toLowerCase()/toUpperCase()：把字符转换成小写/大写
                if(tagName === 'button'){
                    tbody.removeChild(_target.parentNode.parentNode);
                }

                // 编辑表格
                // 1>点击td时,生成一个输入框
                else if(tagName === 'td'){
                    // 第一个和最有一个td不可编辑
                    if(_target === _target.parentNode.firstElementChild || _target === _target.parentNode.lastElementChild){
                        return;
                    }
                    var input = document.createElement('input');

                    // 2>把td的内容赋值给输入框
                    input.value = _target.innerHTML;

                    // 3>把输入框添加到td
                    _target.innerHTML = '';
                    _target.appendChild(input);

                    // 自动获得焦点
                    input.focus();


                    // 3）保存编辑
                    // 输入框失去焦点时保存
                    input.onblur = function(){
                        _target.innerHTML = input.value;
                    }

                }
                    // 给每个hobby复选框绑定点击事件
                    // 判定#all复选框的勾选状态
                    for(var i=0;i<hobby.length;i++){
                        hobby[i].onclick = function(){
                            all.checked = isCheckAll();
                        }
                    }   

            }
            // 4）全选/不选
            // 把所有hobby复选框的状态改成与#all一致
            all.onclick = function(){
                console.log('------')
                for(var i=0;i<hobby.length;i++){
                    hobby[i].checked = all.checked;
                }
            }
            // 5）反选
            // 把所有hobby的勾选状态取反
            fx.onclick = function(){
                console.log('====')
                for(var i=0;i<hobby.length;i++){
                    hobby[i].checked = !hobby[i].checked;
                }

                all.checked = isCheckAll();
            }
            // 封装#all勾选状态函数
            // * 如果所有的hobby勾选，则#all勾选
            // * 只有有一个hobby未勾选，则#all取消勾选
            function isCheckAll(){
                // 假设hobby全部勾选
                var res = true;

                for(var i=0;i<hobby.length;i++){
                    if(!hobby[i].checked){
                        res = false;
                        break;
                    }
                }

                return res;
            }
        }
    </script>
</head>
<body>
    <label for="banji">班级</label>
    <input type="text" id="banji" name="banji">
    <label for="name">姓名</label>
    <input type="text" id="name" name="name">
    <label for="sex">性别</label>
    <input type="text" id="sex" name="sex">
    <label for="age">年龄</label>
    <input type="number" id="age" name="age">
    <button id="btnSave">保存</button>
    <div class="list">
        <div>

        </div>
        <table id="tableList">
            <thead>
                <th><input type="checkbox" name="all" id="all">全选</th>
                <th><input type="checkbox" name="fx" id="fx">反选</th>
                <tr>
                    <th width="40"></th>
                    <th width="40">编号</th>
                    <th width="40">班级</th>
                    <th width="160">姓名</th>
                    <th width="60">性别</th>
                    <th width="160">年龄</th>
                    <th width="60">操作</th>
                </tr>
            </thead>
            <tbody></tbody></table>
</body>
</html>
    评论

报告相同问题？