js实现class样式的修改、添加及删除的方法


Posted in Javascript onJanuary 20, 2015

本文实例讲述了js实现class样式的修改、添加及删除的方法。分享给大家供大家参考。具体分析如下:

比较常见的js前端功能,通过修改标签的className实现相应的功能。

具体代码如下:

<table>

<tbody>

<tr>

<td>js实现class的样式的修改、添加、删除</td>

<td>

 <a e_value="g_sn" ename="商品编码" class="goods_sale_property" href="javascript:void(0);">商品编码</a>

 <a e_value="pdt_sn" ename="商品货号" class="goods_sale_property" href="javascript:void(0);">商品货号</a>

 <a e_value="pdt_name" ename="规格名称" class="goods_sale_property" href="javascript:void(0);">规格名称</a>

</td>

</tr>

</tbody>

<tbody>

    <tr>

            <td><a onclick="selectAll()" style="color:#F00">全选</a> </td>

            <td><a onclick="selectNotAll()" style="color:#F00">全不选</a></td>

        </tr> 

    </tbody>

</table>
<script>

$('.goods_sale_property').click(function(){//单独a标签点击添加class

    if($(this).hasClass('goods_sale_property_checked')){

        $(this).removeClass('goods_sale_property_checked');

    }else{

        $(this).addClass('goods_sale_property_checked');

    }

});

function selectAll(){//全选添class

 $('.goods_sale_property').each(function(i){

        $(this).addClass('goods_sale_property_checked');

 }); 

}

function selectNotAll(){//全选删除class

 $('.goods_sale_property').each(function(i){

$(this).removeClass('goods_sale_property_checked');

 }); 

}

</script>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
jquery 图片预加载 自动等比例缩放插件
Dec 25 Javascript
jQuery的attr与prop使用介绍
Oct 10 Javascript
jquery 选取方法都有哪些
May 18 Javascript
js选择并转移导航菜单示例代码
Aug 19 Javascript
JavaScript实现获得所有兄弟节点的方法
Jul 23 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 Javascript
js实现方块上下左右移动效果
Aug 17 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 Javascript
面试题:react和vue的区别分析
Apr 08 Javascript
DOM基础教程之事件类型
Jan 20 #Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 #Javascript
DOM基础教程之事件对象
Jan 20 #Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 #Javascript
js实现的捐赠管理完整实例
Jan 20 #Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 #Javascript
JavaScript数组Array对象增加和删除元素方法总结
Jan 20 #Javascript
You might like
php addslashes 函数详细分析说明
2009/06/23 PHP
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
php中用foreach来操作数组的代码
2011/07/17 PHP
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
php实现分页工具类分享
2014/01/09 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
使用jquery实现简单的ajax
2013/07/08 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
2016/05/25 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
详解python的四种内置数据结构
2019/03/19 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
奥地利网上书店:Weltbild
2017/07/14 全球购物
C#的几个面试问题
2016/05/22 面试题
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
新闻记者个人求职的自我评价
2013/11/28 职场文书
文秘大学生求职信
2014/02/25 职场文书
安全目标管理责任书
2014/07/25 职场文书
2014教师年度工作总结
2014/11/10 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
大学生入党自荐书
2015/03/05 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android
python实现局部图像放大
2021/11/17 Python