表格的增删改查整体应用

最新推荐文章于 2024-03-14 17:54:39 发布
最新推荐文章于 2024-03-14 17:54:39 发布
阅读量54 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58849698/article/details/119564983
版权

<!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>Document</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <style type="text/css">
        table {
            width: 800px;
            border-collapse: collapse;

        }
    </style>
</head>

<body>
    <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" οnclick="add()">
                <input value="批量删除" type="button" οnclick="delBatch()">
            </td>
        </tr>
    </table>
    <table border="1">
        <thead>
            <tr>
                <td><input id="checkall" type="checkbox" οnchange="checkAll(this)"></td>
                <td>姓名</td>
                <td>年龄</td>
                <td>地址</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody id="mytb">
            <tr>
                <td><input type="checkbox"></td>
                <td>谢欣</td>
                <td>30</td>
                <td>郑州</td>
                <td><a href="javascript:void(0)" οnclick="del(this)">删除</a></td>
            </tr>
        </tbody>

    </table>

    <script>
        function add() {
            //点击追加table表格数据
            var Name = $('#realName').val();
            var age = $('#age').val();
            var address = $('#address').val();
            //添加到tr里面 
            var trtui = $(
                "<tr>"
                + "<td><input type=\"checkbox\"></td>"
                + "<td>" + Name + "</td>"
                + "<td>" + age + "</td>"
                + "<td>" + address + "</td>"
                + "<td><a href=\"javascript:void(0)\" οnclick=\"del(this)\">删除</a></td>"
                + "</tr>"
            );

            //追加到表中
            $('#mytb').append(trtui);
        }

         //全选
         $("#checkall").change(function () {
            $.each($('table tr td>input'), function (index, value) {
                //console.log($(this).val())  //遍历取值  
                //反选和全选
                $(this).prop('checked', !($(this).prop('checked')));

            })
            
        })

    //      //全选和不全选
    //      $("#checkall").change(function () {
    //         var istrue = $(this).prop('checked');
    //         if (istrue) {
    //             $.each($('table tr td>input'), function (index, value) {
    //                 $(this).prop('checked', true);
    //             })
    //         } else {
    //             $(this).prop('checked', false);
    //        } 
    //  })
    
        //批量删除
        function delBatch() {
            $("tbody input:checked").parent().parent().remove();
        }
        //删除一行 $(obj)相当于把obj对象转换成jquery对象
        function del(obj) {
            $(obj).parent().parent().remove();//删除当前行
        }

    </script>

</body>

</html>

xnjj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery 列表多选删除
watermelon_xi的博客
12-12 900
学员管理，第一次拿到这个模块的时候觉得不是那么的难，只需要实现增，删，改，查，这四个功能就可以了，但真正做了之后才发现真的要考虑的问题有很多，所以这次先分享全选删除功能，开始吧。 先展示我的布局： 这个表格和按钮都是用Bootstrap做的，图标是奥森图标 下面来看代码： （1）全选，多选$(chooseAll); function chooseAll() { $("#btn")
jquery+js实现动态表格的创建及列表全选等操作
qq_36760873的博客
10-06 850
jquery+js实现动态表格的创建及列表全选等操作 1.效果图附上： 2.代码呈上： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery.min.js" type="tex...
jquery-表格的增删改查整体应用
qq_45740126的博客
07-27 102
<!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>Do.
html多选框 jquery,jquery中表单 多选框的一种巧妙写法
weixin_35367646的博客
06-04 181
$(function(){$("tbody>tr:odd").addClass("odd");$("tbody>tr:even").addClass("even");$('tbody>tr').click(function(){var hasSelected = $(this).hasClass('selected');$(this)[hasSelected ? "removeC...
jquery实现表格的增删改查整体应用
LHH201016的博客
08-22 277
<!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>Doc...
第二阶段（day22）Vue增删改查
sunshine195的博客
05-20 1856
...
Android整合SQLite数据库进行基本的增删改查
个人学习博客，不足之处，还望不吝赐教！
12-13 1147
使用Android整合SQLite数据库进行数据存储，大致可以划分为三步：①继承 ContentProvider 类，实现CRUD四个方法②继承 SQLiteOpenHelper，创建数据库③在清单文件AndroidManifest中声明 ContentProvider。
1.实现简单的增删改查（Asp.Net MVC+Layui）
zeron01的博客
10-27 8374
实现简单的增删改查（Asp.Net MVC+Layui）
QT利用QTableView和自定义Model实现一个增删改查等功能超全的复用型表格
最新发布
CodeWorld1999的博客
03-14 2104
自定义Model实现一个增删改查等功能的复用型表格TableView——未链接数据库版（动图展示效果并内附完整Demo）
php数据库的增删改查 php与javascript之间的交互
10-19
在本文中，我们将深入探讨PHP如何进行数据库的增删改查操作，以及PHP与JavaScript之间的交互。首先，我们需要了解PHP操作MySQL数据库的基本步骤。 1. **PHP数据库连接**： PHP使用`mysql_connect()`函数连接到...
增删改查图标
04-04
以下是关于增删改查图标以及它们在IT应用中的详细知识： 1. **创建（Create）**：创建图标通常表现为一个“+”号或一个空白的文档，表示添加新记录或创建新项目。在UI设计中，这个图标常出现在表格的顶部或侧边，...
html+js+css 工人信息管理功能（增删改查）前端实现，不连数据库
12-09
在这个系统中，JS可能用于实现增删改查的逻辑，如添加新工人信息，删除选定的工人，修改现有信息，并在前端即时反馈这些变化。 4. jQuery库：jQuery是一个广泛使用的JS库，简化了DOM操作、事件处理和动画等功能。在...
三层实现单表增删改查
01-09
在这个层面上，你需要设计用户友好的界面，如表格展示数据，按钮执行增删改查操作。用户点击这些按钮后，会触发相应的事件，这些事件会被传递到业务逻辑层进行处理。 其次，**业务逻辑层（Business Logic Layer）**...
Ext+ssh 实现增删改查小例子
12-06
这个小例子将展示如何利用这些技术实现数据的增删改查（CRUD）操作，这对于初学者来说是一个很好的学习起点。 首先，让我们详细了解一下这三个主要组件： 1. **Ext**：ExtJS是一个JavaScript库，专门用于创建富...
任务清单项目
qq_58849698的博客
07-30 4623
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <titl...
穿梭框的使用
qq_58849698的博客
07-31 158
<!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>Do...
单选、复选框
qq_58849698的博客
07-26 81
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="Scripts/jquery-3.2.1.min.js"></script> <script type="text/javascript"> ...
省份三联动
qq_58849698的博客
07-28 80
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <select id="province"> <option value="-1">请选择</option> </select&gt...
层级选择器找儿子找后代
qq_58849698的博客
08-08 62
<!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>Doc...
阿里云专有云企业版V3.9.0表格存储TableStore运维手册
用户可以通过SDK或者控制台进行数据的增删改查操作。 4. **高可用与一致性**：TableStore通过分布式架构保证服务的高可用性，数据多副本策略确保了数据的安全性和一致性。在故障发生时，系统能够自动切换到备份节点...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值