jquery-表格的增删改查整体应用

最新推荐文章于 2023-12-24 18:00:00 发布

永泽心语

最新推荐文章于 2023-12-24 18:00:00 发布

阅读量134

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_45740126/article/details/119155793

版权

前端专栏收录该内容

8 篇文章 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">
    <title>Document</title>
    <script src="jquery-3.2.1.min.js"></script>
    <style>
        table{  
             width: 800px;
             border-collapse: collapse; 
        }
    </style>
</head>
<body>
    <script>
        //添加
        function add(){
          var realName = $("#realName").val();
          var age=$("#age").val();
          var address=$("#address").val();
          var str=$('<tr>'+'<td>'+'<input type="checkbox">'+'</td>'+'<td>'+realName+'</td>'+'<td>'+age+'</td>'+'<td>'+address+'</td>'+'<td>'+'<input type="button" value="删除" onclick="delBtn(this)">'+'</td>'+'</tr>');
          $("table:eq(1)").append(str)
        }
        //全选
      function panduan(){
            var a=$("table:eq(1) tr:eq(0) td:eq(0)>input").prop("checked");
            if(a){
                $.each($(":checkbox"), function(index, value) {
                    $(this).prop("checked",true)
                })
            }
        } 
        //批量删除
        function delBatch(){
     var a= $("table:eq(1) tr:gt(0) :checkbox:checked")
            a.each(function(index, value) {
                $(this).parent().parent().remove()
            })
        }
        //删除一行
      function delBtn(btn){
        $(btn).parent().parent().remove()
      }
    </script>
    <table>
        <tr>
            <td>姓名：<input id="realName" name="realName" type="text"></td>
            <td>年龄：<input id="age" name="age" type="text"></td>
            <td>地址：<input  id="address" name="address" type="text"></td>
            <td><input value="添加" type="button" onclick="add()">
                <input value="批量删除" type="button" onclick="delBatch()">
              
            </td>
        </tr>
    </table>
    <table border="1">
        <tr>
            <td><input type="checkbox" id="selectAll" onchange="panduan()"></td>
            <td>姓名</td>
            <td>年龄</td>
            <td>地址</td>
            <td>操作</td>
        </tr>
    </table>
</body>
</html>

运行结果：