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 相关文章推荐
javascript模仿msgbox提示效果代码
Jun 10 Javascript
jQuery学习基础知识小结
Nov 25 Javascript
js中文逗号转英文实现
Feb 11 Javascript
Js实现自定义右键行为
Mar 26 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
vue-router单页面路由
Jun 17 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
ant design实现圈选功能
Dec 17 Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 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中循环语句的用法介绍
2012/01/30 PHP
php 函数中使用static的说明
2012/06/01 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
[01:27]DOTA2电竞之夜 今夜共饮庆功酒
2014/08/02 DOTA
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
Python绘制七段数码管实例代码
2017/12/20 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
Python PIL图片添加字体的例子
2019/08/22 Python
python ftplib模块使用代码实例
2019/12/31 Python
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
查询优化的一般准则有哪些
2015/03/08 面试题
测绘工程专业个人自我评价
2013/12/01 职场文书
教育课题研究自我鉴定范文
2013/12/28 职场文书
关于工资低的辞职信
2014/01/14 职场文书
《猴子种树》教学反思
2014/02/14 职场文书
物业消防安全责任书
2014/07/23 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
手机销售员岗位职责
2015/04/11 职场文书
红歌会主持词
2015/07/02 职场文书
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript