jQuery全选全删动态表格

最新推荐文章于 2022-08-31 20:38:29 发布
最新推荐文章于 2022-08-31 20:38:29 发布
阅读量259 收藏
点赞数 2
分类专栏： 知识点分析 文章标签： jQuery全选全删动态表格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36760873/article/details/102231566
版权

jQuery全选全删动态表格

1.效果图附上：
在这里插入图片描述

2.代码呈上：



<!DOCTaYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content=" keywords" />
<meta name="description" content="description" />
</head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
    body{
   font-size:12px}
    table{
   width:360px;border-collapse:collapse}
    table tr th,td{
   border:solid 1px #666;text-align:center}
    table tr td img{
   border:solid 1px #ccc;padding:3px;width:42px;height:60px;cursor:pointer}
    table tr td span{
   float:left;padding-left:12px}
    table tr th{
   background-color:#ccc;height:32px;background-color:#fff}
    .clsImg{
   position:absolute;border:solid 1px #ccc;padding:3px;background-color:#eee;display:none;cursor:pointer}
    .btn{
   border:solid 1px #666;padding:2px;width:50px;filter:progd:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff,E
最低0.47元/天 解锁文章
........千年老妖
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现table表格checkbox全选的方法分析
10-18
主要介绍了jQuery实现table表格checkbox全选的方法,结合实例形式分析了jQuery事件响应与元素遍历实现table表格checkbox元素状态动态修改相关操作技巧,需要的朋友可以参考下
Jquery实现表单的“全选”，“全部不选”功能
weixin_51474578的博客
07-20 2012
希望帮助到你！！！
jquery的全选代码
笔记
04-12 931
全选jquery代码click是jquery封装的函数（this表示对当前对像操作，就是全选按钮）     $(function(){                  $("#chkall").click(function(){             $("input[name='id[]']").attr("checked", this.checked);//对所有的name是i
利用JQuery实现表格的全选/全不选及子项与总项的联动
zn740238424的博客
08-31 357
表格的全选与全不选及 ① 全选状态下取消一个子项，总项就被取消。② 全部子项都被勾选时，总项自动勾选。
jquery全选反选全不选案例
04-04
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
jQuery全选
07-28
"jQuery全选"这个主题，就是关于如何使用jQuery实现表格或其他列表元素的全选和反选功能。下面，我们将深入探讨这一知识点，包括相关原理、代码实现以及实际应用。 一、jQuery全选的基本概念 在网页交互中，用户...
纯Jquery表格全选+反选+增删查找
11-13
纯Jquery表格全选+反选+增删查找,一个简陋版本，仅供参考，细节处理不周到处请评论，后期有空修改
jQuery 的全选(全非选)即取得被选中的值使用介绍
10-26
在这个问题中，我们关注的是如何使用 jQuery 实现全选（selectAll）和全非选（unselectAll）功能，以及获取选中值的操作。这个功能在诸如表格复选框选择、多选项筛选等场景中非常常见。 首先，来看一下给出的 HTML ...
jquery 实现全选，全不选，反选，获取选中的值
12-19
对于“全选”、“全不选”和“反选”功能，jQuery 提供了简洁的解决方案，同时也可以方便地获取选中的元素值。以下我们将详细探讨如何使用 jQuery 实现这些功能。 1. **全选**： 全选功能通常应用于具有多选选项的...
jQuery+Datatables实现表格批量删除功能【推荐】
12-29
Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。 最近遇到这样的需求要求把表格批量删除。下面通过实例代码给大家介绍下。 1：点击全选的选择框CheckBox，选中以下列表中所有的选择框 2：再次点击全选的选择框CheckBox，不选中以下列表中所有的选择框 3：单选某个选择框 如图所示： http://recordit.co/GLj5a5BWo9 简单代码demo： <thead> <tr role=row class=heading> <th xss=removed> 全选 <in
JQuery实现checkbox的全选取消全选
10-18
JQuery实现checkbox的全选取消全选
jQuery表格行全选反选单选代码.zip
07-05
jQuery表格行全选反选单选代码是一款基于tableCheckbox.js插件实现的，鼠标点击表格行时候能选中行内的复选框，且当前行会高亮显示，支持shift多选。
jquery实现全选、全不选以及单选功能
12-30
效果图： 代码如下： <link rel=stylesheet href=http://wiki.jikexueyuan.com/project/bootstrap4/dist/css/bootstrap.min.css rel=external nofollow > [removed] [removed] <t
jquery实现表格全选
温柔女魔头
01-28 693
HTML &lt;body&gt; &lt;div class="wrap"&gt;&lt;/div&gt; &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;td&gt; &lt;input type="checkbox" id="j_cbAll"&gt;
jq对表格全选的操作
qq_33530408的博客
07-24 533
引入js文件，对案例理解：我们可以获取表格的全部长度，当点击表格时，获得了个数和全部长度一样就说明是全选了。简单点就是被选中的个数等于全部长度就是全选。还有就是当全选按钮被选中的时候，下面的表格小按钮也一样会呗选中，就是我是什么样的你就是什么样的。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta ...
jQuery中的表格全选与不选
Woo_home的博客
06-09 427
html代码 <!DOCTYPE html> <html> <head> <title>jquery</title> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> </head> <body> &...
使用jQuery完成表单验证，实现全选、全不选、反选以及提交事件
weixin_45866961的博客
06-14 447
使用jquery完成表单验证，实验全选、全不选、反选以及提交事件
jquery 全选多选 单选
chungoujiang1690的博客
07-27 196
$(function(){ /*单选*/ $(".single i").click(function(){ $(".single i").removeClass().addClass("iconfont icon-fuxuankuangA"); ...
jquery表格实现动态增删改查，表格每条数据带复选框
最新发布
05-25
以下是一个基于jQuery实现的动态增删改查表格，其中每条数据带有复选框： HTML代码： ```html <table id="myTable"> <thead> <tr> <th><input type="checkbox" id="checkAll"></th> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" class="checkItem"></td> <td>张三</td> <td>20</td> <td> <button class="editBtn">编辑</button> <button class="deleteBtn">删除</button> </td> </tr> </tbody> </table> <button id="addBtn">新增</button> ``` jQuery代码： ```javascript // 全选/取消全选 $("#checkAll").click(function() { $(".checkItem").prop("checked", this.checked); }); // 单个复选框状态改变时改变全选复选框状态 $(".checkItem").change(function() { if ($(this).prop("checked") === false) { $("#checkAll").prop("checked", false); } else if ($(".checkItem:checked").length === $(".checkItem").length) { $("#checkAll").prop("checked", true); } }); // 点击新增按钮 $("#addBtn").click(function() { var newRow = "<tr>" + "<td><input type='checkbox' class='checkItem'></td>" + "<td><input type='text' class='nameInput'></td>" + "<td><input type='text' class='ageInput'></td>" + "<td><button class='saveBtn'>保存</button>" + "<button class='cancelBtn'>取消</button></td>" + "</tr>"; $("#myTable tbody").append(newRow); }); // 点击保存按钮 $("#myTable").on("click", ".saveBtn", function() { var name = $(this).parents("tr").find(".nameInput").val(); var age = $(this).parents("tr").find(".ageInput").val(); var newRow = "<tr>" + "<td><input type='checkbox' class='checkItem'></td>" + "<td>" + name + "</td>" + "<td>" + age + "</td>" + "<td><button class='editBtn'>编辑</button>" + "<button class='deleteBtn'>删除</button></td>" + "</tr>"; $(this).parents("tr").replaceWith(newRow); }); // 点击取消按钮 $("#myTable").on("click", ".cancelBtn", function() { $(this).parents("tr").remove(); }); // 点击编辑按钮 $("#myTable").on("click", ".editBtn", function() { var name = $(this).parents("tr").find("td:eq(1)").text(); var age = $(this).parents("tr").find("td:eq(2)").text(); var editRow = "<tr>" + "<td><input type='checkbox' class='checkItem'></td>" + "<td><input type='text' class='nameInput' value='" + name + "'></td>" + "<td><input type='text' class='ageInput' value='" + age + "'></td>" + "<td><button class='saveBtn'>保存</button>" + "<button class='cancelBtn'>取消</button></td>" + "</tr>"; $(this).parents("tr").replaceWith(editRow); }); // 点击删除按钮 $("#myTable").on("click", ".deleteBtn", function() { $(this).parents("tr").remove(); }); ``` 以上代码实现了动态增删改查表格，并且每条数据带有复选框。其中，全选/取消全选、单个复选框状态改变时改变全选复选框状态通过jQuery实现；新增、保存、取消、编辑、删除等操作通过绑定jQuery事件实现。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值