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 相关文章推荐
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
jquery一句话全选/取消全选
Mar 01 Javascript
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
JavaScript页面模板库handlebars的简单用法
Mar 02 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
JavaScript仿网易选项卡制作代码
Oct 06 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
javascript中可能用得到的全部的排序算法
Mar 05 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用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
js实现带积分弹球小游戏
2020/07/21 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
python编程羊车门问题代码示例
2017/10/25 Python
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
解决Jupyter NoteBook输出的图表太小看不清问题
2020/04/16 Python
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
手术室护士自我鉴定
2013/10/14 职场文书
外语学院毕业生的自我鉴定
2013/11/28 职场文书
运动会广播稿400字
2014/01/25 职场文书
部队万能检讨书
2014/02/20 职场文书
安全环保演讲稿
2014/08/28 职场文书
个人务虚会发言材料
2014/10/20 职场文书
五年级学生评语大全
2014/12/26 职场文书
公务员个人年终总结
2015/02/12 职场文书