使用jQuery实现动态的增、收、查、改的功能

最新推荐文章于 2024-08-26 20:25:07 发布

java庞

最新推荐文章于 2024-08-26 20:25:07 发布

阅读量368

点赞数

分类专栏： Javascript 文章标签： jquery javascript html

本文链接：https://blog.csdn.net/weixin_44899752/article/details/127442586

版权

Javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/jquery-3.3.1.min.js">

    </script>
    <title>Document</title>
</head>
<body>
    <button id="add_stu">添加</button>
    <input type="text" id="sel_stu">
    <button id="select_btn">查询</button>
    <table border="1" width="500px">
        <tr id="one">
            <td>ID</td>
            <td>姓名</td>
            <td>薪水</td>
            <td>操作</td>
        </tr>
    </table>
</body>
<script>
    $(function(){
        //添加
        $("#add_stu").click(function(){
            var id = prompt("请输入ID")
            var name = prompt("请输入姓名")
            var money = prompt("请输入薪水")
           //创建一行
            $("<button class='del'>删除</button>")
           var $tr = $("<tr><td>"+id+"</td><td>"+name+"</td><td>"+money+
                      "</td><td><button οnclick='del(this)'>删除</button><button οnclick='edit(this)'>编辑</button></td></tr>")          
           $("#one").after($tr)
        })
        
    })
    //删除
    function del(obj){
      var td = $(obj).parent()
      td.parent().remove()
    }
    //编辑
    function edit(obj){
        //获取当前按钮的父节点
        var td = $(obj).parent()
        //获取当前td所有的同辈元素
        var tdes = td.siblings();
        //获取原来数据的id的值
        var id = tdes[0].innerText;
        var name = prompt("请输入修改后的姓名")
        var money = prompt("请输入修改后的薪水")
        var $tr = $("<tr><td>"+id+"</td><td>"+name+"</td><td>"+money+
                      "</td><td><button οnclick='del(this)'>删除</button><button οnclick='edit(this)'>编辑</button></td></tr>")   
        //替换
         //第一步 先获取当前行
         var td = $(obj).parent()
         var old_tr = td.parent()   
         // 替换原来的行tr
         old_tr.replaceWith($tr)     
    }
    //根据id查询
    $("#select_btn").click(function(){
        //第一步 先获取输入查询的内容
        var sel_id = $("#sel_stu").val();
        //获取所有的tr
        var tres = $("#one").nextAll();
        //新建数组存储id值
        var id_arr=[];
        if(sel_id!=""){
            tres.each(function(index){
                //获取当行的第一列td的值
                var td_id = $(this).find("td")[0].innerText
                id_arr.push(td_id)//给数组添加元素
            });

            for(var i =0;i<id_arr.length;i++){
                if(sel_id==id_arr[i]){
                    tres.eq(i).show();
                }else{
                    tres.eq(i).hide();
                }
            }
        }else{
            tres.each(function(){
                $(this).show()
            })
        }
    })

</script>
</html>