题目

在这里插入图片描述

（1）当页面加载完成功后显示用户列表；
（2）用户新增；
（3）选中"序号"才能用户编辑或者删除；
（4）可以根据用户工号和名称查询（不考虑模糊查询、使用完整的工号和名称）

注意事项

绑定单击勾选事件时，不能将全部的tr行进行绑定，这样会导致每新增一行重复绑定
需要再文档加载完成后自动执行一个绑定事件，和每增加一行表格进行新的绑定

实现代码

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <style>
        
        td,
        th {
     
     
            text-align: center;
            vertical-align: middle;
        }

        
    </style>
</head>

<body style="padding:30px;">
    <button class="btn btn-info" id="add">新增</button>
    <button class="btn btn-info" id="del">删除</button>
    <button class="btn btn-info "id="updata">编辑</button>
    <button class="btn btn-info" id="select">查询</button>
    <input type="text" name="" id="selId" placeholder="按工号查询">
    <input type="text" name="" id="selName" placeholder="按姓名查询">
    <form>
        <table class="table table-responsive">
                <tr>
                    <th>序号</th>
                    <th>工号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>密码</th>
                    <th>年龄</th>
                    <th>出生日期</th>
                </tr>
                <tr class="info">
                    <td><input type="checkbox"></td>
                    <td>1001</td>
                    <td>皮皮潇</td>
                    <td>男</td>
                    <td>10086</td>
                    <td>18</td>
                    <td>2020-10-10</td>
                </tr>
                <tr class="warning">
                    <td><input type="checkbox"></td>
                    <td>1002</td>
                    <td>皮皮</td>
                    <td>男</td>
                    <td>10086</td>
                    <td>18</td>
                    <td>2020-10-10</td>
                </tr>
                <tr class="info">
                    <td><input type="checkbox"></td>
                    <td>1003</td>
                    <td>皮皮潇</td>
                    <td>男</td>
                    <td>10086</td>
                    <td>18</td>
                    <td>2020-10-10</td>
                </tr>

            
        </table>
    </form>

    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <script src="js/zuoye.js"></script>
</body>

</html>

javascript

$(document).ready(load());
// $(document).ready(newload());
//新增函数
var index = 1;
$("#add").click(function add() {
    
    
    index++;//新增一行索引+1
    //获取新的tr td
    var newtr = $("<tr></tr>");
    var newtd = $("<td><input type='checkbox'/></td><td></td><td></td><td></td><td></td><td></td><td></td>");
    $("tr:last").after(newtr); // 将新的tr添加到最后一个tr的后面
    //添加子节点
    $("tr:last").append(newtd);//添加td
    //隔行变色
    if (index % 2 == 0) {
    
    
        $("tr:last").attr("class", "info");
    } else {
    
    
        $("tr:last").attr("class", "warning");
    }
    newload(newtr);
    

});

//为原本存在的tr绑定事件
function load() {
    
    
    $("tr").slice(1).each(function () {
    
    //slice(1)表示下标从1开始的数组元素 遍历每一行 除去表头
        var old = this;
        $(this).children().slice(1).click(function () {
    
    //遍历每一列 除去复选框存在的第一列
            $($(old).children()[0]).children().each(function () {
    
    //遍历td里的子节点
                if (this.type == "checkbox") {
    
    //如果子节点类型为复选框则执行
                    
                    if (!this.checked) {
    
    
                        this.checked = true;
                        
                    } else {
    
    
                        this.checked = false;
                        
                    }
                }
            });
        });
    });
}
//遍历新增的tr 给新增的添加click事件 

function newload(newtr){
    
    
    $(newtr).children().slice(1).click(function (){
    
    
        var td = $(newtr).children()[0];
        var input = $(td).children()[0];
        
        if(!input.checked){
    
    
            
            input.checked = true;
            console.log("t");
        }else{
    
    
            console.log("b");
            input.checked = false;
        }
    });
};

// 删除函数
$("#del").click(function () {
    
    
    //获取选中的行
    $("tr").slice(1).each(function () {
    
    
        var old =this;
        var td = $(this).children()[0];
        var input = $(td).children()[0];
        if (input.checked) {
    
    
            //删除节点
           $(old).remove();
        }
    });

})
//查询
$("#select").click(function () {
    
    
    //获取输入框的值
    var id = $("#selId").val();
    var name = $("#selName").val();
    //遍历每一行获得工号和姓名
    $("tr").slice(1).each(function () {
    
    

        var oid = $($(this).children()[1]).text();
        var oname = $($(this).children()[2]).text();
        if (id == oid || name == oname) {
    
    
            $(this).siblings().slice(1).each(function () {
    
    
                var nid = $($(this).children()[1]).text();
                var nname = $($(this).children()[2]).text();
                if (nid == id || nname == name) {
    
    
                    $(this).show();
                } else {
    
    
                    $(this).hide();
                }

            });
        }

    });
});
//编辑
$("#updata").click(function () {
    
    
    //获取选中的行
    $("tr").slice(1).each(function () {
    
    
        var td = $(this).children()[0];
        var input = $(td).children()[0];
        if (input.checked) {
    
    
            $(this).children().slice(1).attr("contenteditable", "true");
        }
    });
})
//编辑  第二种方法 没成功~
// $("#updata").click(function(){
    
    
//     //获取选中的行
//     $("tr").slice(1).each(function(){
    
    
//        var td = $(this).children()[0];
//        var input = $(td).children()[0];

//            if(input.checked){
    
    
//              var arr = $(this).children().slice(1);//得到所有的td 除了第一个
//              arr.each(function(){
    
    
//                  var obj = $(this);
//                  var oldtext = $(this).text();
//                  var newobj = $("<input type='text'/>");
//                  $(this).text("");
//                  $(this).append(newobj);//添加一个文本框节点
//                  var input = $(this).children()[0];//得到文本框节点
//                  input.value = oldtext;
//                  input.focus();//获得焦点
//                  input.onblur = function(){
    
    
//                     obj.text(this.value ? this.value : oldtext);  
//                  };
//              });
//            };
//      });
//      load();
// })

【练习】jQuery实现表格的增删查改

题目

注意事项

实现代码

猜你喜欢