Jquery复习——编写一个全选全部选和控制DOM节点来新增表格

最新推荐文章于 2022-10-03 13:26:02 发布
最新推荐文章于 2022-10-03 13:26:02 发布
阅读量157 收藏
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ping_Pig/article/details/82421971
版权

废话少说先上JS代码：

JS的版本库是"jquery-1.11.0.min.js"

//全选js

$(function () {
    var b = 0;
    $("#btn_check").click(function () {
        if (b == 0) {
            b = 1;
            $("#btn_check").val("全不选")
        $("input[type=checkbox]").prop("checked", true);
        }
        else {
            b = 0;
            $("#btn_check").val("全选")
            $("input[type=checkbox]").prop("checked", false);
        }
    });
});
//表格JS
var mycars = [
    { id: 1, name: "jack", age: 12 },
    { id: 2, name: "jerry", age: 23 },
    { id: 3, name: "mack", age: 34 }

];
$(function () {
    $("#btn_table").click(function () {
        for (var i = 0; i < mycars.length; i++) {
            var emp = mycars[i];
            var $tr = $("<tr></tr>");
            $tr
                .append("<td>" + emp.id + "</td>")
                .append("<td>" + emp.name + "</td>")
                .append("<td>" + emp.age + "</td>")
            .appendTo("table#tb tbody")
            .hover(function () {
                 yanse = $(this).css("backgroundColor");
                $(this).css("backgroundColor", "blue");
                
            },
            function () {
                $(this).css("backgroundColor", yanse);
            });
            $("table#tb tbody tr:even").css("background", "red");
            $("table#tb tbody tr:odd").css("background", "yellow");
        }
    });
});

HTML代码：


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <input type="checkbox" name="ck" value="音乐" />音乐
    <input type="checkbox" name="ck" value="篮球" />篮球
    <input type="checkbox" name="ck" value="游戏" />游戏
    <input type="checkbox" name="ck" value="女人" />女人
    <input type="button"   name="" value="全选"  id="btn_check"/>
    <input type="button" name="name" value="表格"  id="btn_table"/>
    <table id="tb">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>

            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>
</html>

Ping_Pig
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery对Table进行全选反选 增加节点 删除节点
刘晓飞
05-06 976
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">               table      {          width:600px;          height:300px;      }
JavaScript的学习（三）——DOM（全选反选全不选的实现、动态表格增加删除的实现）
有问题请发邮箱dengyifanlittle@163.com进行讨论
08-31 1660
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model） 通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML。JavaScript能改变页面中所有HTML元素，能改变所有HTML属性，能改变所有CSS属性，能对页面中的所有事件作出反应。   通过...
一个页面多个全选，根据父节点来实现
chenqunjian的博客
07-08 539
jQuery实现CheckBox全选、全不选                (function($) {    $.fn.checkboxAll = function(a, b, c) {            //a表示全选name值，b表示子checkbox的name值            var $select_all = $("input[name='" + a + "']
JQuery专题(三)-JQuery之DOM操作
weixin_43139024的博客
10-03 538
JQuery
想要更加方便完成DOM操作，事件处理，动画设计吗？我带来了一个小伙伴——jQuery
m0_53619602的博客
07-20 196
jQuery是一个快速简洁的JavaScript库 jQuery封装了JavaScript常用的功能代码，优化了DOM操作，事件处理。动画设计和Ajax交互优点官网地址 ：http://jquery.com/ DOM加载完毕再去执行js代码 相当于原生js’中的DOMContentLoaded 3. jQuery的顶级对象 $ $是jQuery的别称 $ 也是jQuery的顶级对象 jQuery对象和DOM对象 用原生js获取的对象就是DOM对象 jQuery方法获取的元素就是jQuery对象
JavaEE学习日志(六十一): jQuery的DOM操作，隔行变色，全选全不选，定时广告
Sakuraaaaaaa的博客
04-01 285
JavaEE学习日志（六十一） jQuery： jQuery的DOM操作， jQuery的DOM操作一， jQuery的DOM操作二， jQuery的DOM操作三， jQuery的DOM操作四， jQuery的DOM操作五。 jQuery的动画， 隔行变色， 全选全不选， 定时广告。
前端——JavaScript（ECMAScript、DOM、BOM）和jQuery
Today_He的博客
09-23 359
文章目录JavaScriptJS概述JS语法变量数据类型数组0循环0JS函数0JS中DOM事件及其绑定0JS示例——全选反选、隔行换色 JavaScript JS概述 一、简述 1、简称js 2、高级编程的脚本语言（脚本：不能脱离载体html） 3、因为和sun公司有合作，所以叫javascript 二、JavaScript的作用 通过DOM获取html的元素（标签）内容。可以提交数据（登陆验证等），可以给页面加上动态效果（轮播图等） 三、组成 ECMAScript、DOM、BOM 下面引用一段： 1.BO
蓝旭前端自学自讲——jQuery 选择器 + DOM操作 + jQuery 动画 + jQuery AJAX
ordinaryzry的博客
08-24 361
蓝旭前端自学自讲——jQuery 选择器 + DOM操作 + jQuery 动画 + jQuery AJAX
js全选，全选以后，如果选中其中一个，全选效果取消，如果复选框全部选中，全选按钮自动也被选中
Fredrik的博客
07-13 9354
js全选，全选以后，如果选中其中一个，全选效果取消，如果复选框全部选中，全选按钮自动也被选中
深度学习算法hinton的自动编码器matlab代码.rar
08-09
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
Windows快捷键大全
08-09
Windows系统，Windows快捷键大全，常用快捷键，Windows热键，热键大全，操作系统，IT，电脑，计算机，计算机操作，电脑热键
基于MATLAB的细胞计数MATLAB.7z
最新发布
08-09
在MATLAB中进行细胞计数可以使用以下步骤： 1. 预处理图像：导入图像并进行预处理，例如调整图像大小、转换为灰度图像等。 2. 图像分割：使用合适的图像分割方法将细胞从背景分离出来。常用的图像分割方法包括阈值分割、边缘检测等。 3. 细胞计数：对分割后的图像进行细胞计数。可以使用MATLAB中的函数或自定义算法进行计数。例如，可以使用regionprops函数获取每个连通分量的属性，然后根据一些条件（如面积、圆度等）筛选出细胞，并统计细胞数量。 下面是一个示例代码，演示了如何使用MATLAB进行细胞计数： ```matlab % 1. 导入图像并进行预处理 image = imread('cells.jpg'); grayImage = rgb2gray(image); % 2. 图像分割 threshold = graythresh(grayImage); binaryImage = imbinarize(grayImage, threshold); % 3. 细胞计数 labeledImage = bwlabel(binaryImage);
数据标注分类（13页 PPT）.pptx
08-09
数据标注分类（13页 PPT）
PPAP提交等级表.pdf
08-09
PPAP提交等级表
Ant Design的表格组件 在表格外面设置一个全选按钮控制表格全选/反选 详细代码
05-31
Ant Design的表格组件提供了一个Checkbox组件用于全选控制，可以通过以下步骤实现： 1. 在columns数组中添加一个Checkbox列，设置render函数返回Checkbox组件。 ```javascript const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', }, { title: 'Address', dataIndex: 'address', key: 'address', }, { title: '', key: 'checkbox', render: (text, record) => <Checkbox onChange={() => handleCheckboxChange(record)} /> }, ]; ``` 2. 在Table组件外部添加一个Checkbox组件，设置onChange函数控制表格全选/反选。 ```javascript const [selectedRowKeys, setSelectedRowKeys] = useState([]); const handleCheckboxChange = (record) => { const rowKey = record.key; const selectedRowKeysCopy = [...selectedRowKeys]; const index = selectedRowKeysCopy.indexOf(rowKey); if (index >= 0) { selectedRowKeysCopy.splice(index, 1); } else { selectedRowKeysCopy.push(rowKey); } setSelectedRowKeys(selectedRowKeysCopy); }; const handleCheckAllChange = (e) => { if (e.target.checked) { const keys = data.map((record) => record.key); setSelectedRowKeys(keys); } else { setSelectedRowKeys([]); } }; <Checkbox onChange={handleCheckAllChange}>Select All</Checkbox> <Table columns={columns} dataSource={data} rowSelection={{ selectedRowKeys, onChange: setSelectedRowKeys, }} /> ``` 这样就可以在表格外部添加一个全选的Checkbox，控制表格的全选/反选功能了。同时也需要注意，在Table组件中添加rowSelection属性，用于控制选中的行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值