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具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
无阻塞加载脚本分析[全]
Jan 20 Javascript
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 Javascript
超实用的javascript时间处理总结
Aug 16 Javascript
jquery实现拖动效果(代码分享)
Jan 25 Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 Javascript
vue超时计算的组件实例代码
Jul 09 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
vue2配置scss的方法步骤
Jun 06 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之第五天
2006/10/09 PHP
用PHP实现小型站点广告管理(修正版)
2006/10/09 PHP
PHP递归创建多级目录
2015/11/05 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
YII分模块加载路由的实现方法
2018/10/01 PHP
tp5.0框架隐藏index.php入口文件及模块和控制器的方法分析
2020/02/11 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
js实现缓动动画
2020/11/25 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
python的类方法和静态方法
2014/12/13 Python
Django框架自定义模型管理器与元选项用法分析
2019/07/22 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
Pytorch .pth权重文件的使用解析
2020/02/14 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
《秋游》教学反思
2014/04/24 职场文书
实习指导老师评语
2014/04/26 职场文书
提拔干部考察材料
2014/05/26 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python
解决python存数据库速度太慢的问题
2021/04/23 Python
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers