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 必知必会之closure
Sep 21 Javascript
jQuery操作cookie方法实例教程
Nov 25 Javascript
node.js中的console.dir方法使用说明
Dec 10 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 Javascript
完善的jquery处理机制
Feb 21 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
JavaScript 常见的继承方式汇总
Sep 17 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
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
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
js下获取div中的数据的原理分析
2010/04/07 Javascript
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
javascript向flash swf文件传递参数值注意细节
2012/12/11 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
AngularJS 中的事件详解
2016/07/28 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
JavaScript变速动画函数封装添加任意多个属性
2019/04/03 Javascript
vue-router的hooks用法详解
2020/06/08 Javascript
Python如何实现MySQL实例初始化详解
2017/11/06 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
《自然之道》教学反思
2014/02/11 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
卖房协议书
2014/04/11 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
活动费用申请报告
2015/05/15 职场文书
百家讲坛观后感
2015/06/12 职场文书
初中班主任教育随笔
2015/08/15 职场文书
企业文化学习心得体会
2016/01/21 职场文书
导游词之峨眉山
2019/12/16 职场文书
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技