本文实例讲述了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>

js实现class样式的修改、添加及删除的方法的更多相关文章

  1. 原生JS获取HTML样式并修改

    大家都知道在JavaScript原生操作中获取元素的样式,在实际操作是使用时比较频繁的一件事,这里像大家介绍下获取css样式的方法,希望可以帮助一些需要的人,如果有幸被大牛看到,有更好的办法,欢迎提出 ...

  2. 拿到内存中dom元素的最后样式进行修改obj下的currentStyle方法

    在用dom操作在对页面中的<style></style>里的样式进行操作时,发现时无效的,我觉得是因为页面DOM解析时此标签的样式内容才会被读到内存中,因此JS操作时取不到此标 ...

  3. (转载)html dom节点操作(获取/修改/添加或删除)

    DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下   HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...

  4. js指定标签的id只能添加不能删除

    <body> <form id="form1" runat="server"> <div> <input id=&qu ...

  5. List 重载添加-add,删除-remove方法,以及获取子集方法

    package seday12; import java.util.ArrayList;import java.util.List; /*** @author xingsir* List重载了一对ad ...

  6. easyui学习笔记12—tab标签页的添加和删除

    这一篇我们来看看标签页的添加和删除动作.我在想看这些例子还不如看文档,文档的内容更加全面,但是文档全部是理论没有实际的操作,看起来很枯燥,文档只能是遇到问题的时候查.easyui的文档写的还是很详细的 ...

  7. H5在js中向指定的元素添加样式

    今天在做一个按钮的功能控制,点击之后,要根据判断条件,修改按钮的样式,然后就发现了一个巨好用的方法, <button type="button" id="btn_A ...

  8. 富文本编辑器UEditor自定义工具栏(三、自定义工具栏功能按钮图标及工具栏样式简单修改)

    导读 富文本编辑器UEditor提供丰富了定制配置项,如果想设置个性化的工具栏按钮图标有无办法呢?答案是肯定的!前两篇博文简要介绍了通过将原工具栏隐藏,在自定义的外部按钮上,调用UEditor各命令实 ...

  9. 11-13 js操作css样式

    1.Js操作css样式 Div.style.width=”100px”.在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符. ...

随机推荐

  1. docker学习笔记12:Dockerfile 指令 ENTRYPOINT介绍

    本文介绍Dockerfile的 ENTRYPOINT指令的含义. 先回顾下CMD指令的含义,CMD指令可以指定容器启动时要执行的命令,但它可以被docker run命令的参数覆盖掉. ENTRYPOI ...

  2. Spirng+SpringMVC+Maven+Mybatis+MySQL项目搭建(转)

    这篇文章主要讲解使用eclipse对Spirng+SpringMVC+Maven+Mybatis+MySQL项目搭建过程,包括里面步骤和里面的配置文件如何配置等等都会详细说明. 如果还没有搭建好环境( ...

  3. u-boot分析——struct gd_t与struct bd_t

    gd_t和bd_t是u-boot中两个重要的数据结构,在初始化操作很多都要靠这两个数据结构来保存或传递.分别定义在./include/asm/global_data.h和./include/asm/u ...

  4. 错误解决--oracle中出现ORA-01791: 不是 SELECTed 表达式 错误

    Oracle数据库,执行下面语句出现错误“ORA-01791: 不是 SELECTed 表达式”: select distinct t.name from auth_employee t order ...

  5. 用shell脚本爬取网页信息

    有个小需求,就是爬取一个小网站一些网页里的某些信息,url是带序号的类似的,不需要写真正的spider,网页内容也是差不多的 需要取出网页中<h1></h1>中间的字符串,而且 ...

  6. 演练5-8:Contoso大学校园管理系统(实现存储池和工作单元模式)

    在上一次的教程中,你已经使用继承来消除在 Student 和 Instructor 实体之间的重复代码.在这个教程中,你将要看到使用存储池和工作单元模式进行增.删.改.查的一些方法.像前面的教程一样, ...

  7. X窗口系统名词解释

    前端时间Gentoo的桌面环境出了点问题,发现自己对Linux的桌面环境了解的很少,于是恶补了一下知识,以下名词解释基本上都是来自维基百科的条目和<Linux程序设计(第三版)>.一般而言 ...

  8. [置顶] IOS培训资料

    1 前言 今天给公司部门培训IOS,经过两天整理弄了个PPT和一个小的Demo,希望对大家入门有所帮助. 2 详述 培训内容,主要从开发环境讲起,到Objective-C的简单入门,IOS的简介,以及 ...

  9. 在程序中,你敢怎样使用“goto”语句!

    用goto是一个个人爱好的问题.“我”的意见是,十个goto中有九个可以用相应的结构化结构来替换.在那些简单情形下,你可以完全替换掉goto,在复杂的情况下,十个中也有九个可以不用:你可以把部分代码写 ...

  10. 将DataTable 存到一个集合当中

    将DataTable 存到一个集合中 此做法来自:http://www.codeproject.com/Articles/692832/Simple-way-of-using-SQL-DataTabl ...