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>

时间: 2024-08-02 05:07:20

js实现class的样式的修改、添加、删除的相关文章

js实现网页收藏功能,动态添加删除网址

<html> <head> <title> 动态添加删除网址 </title> <meta charset="utf-8"> <script> function add(){ var name = document.getElementById("name").value; var url = document.getElementById("url").value; var

mysql 修改 添加 删除 表字段

添加表的字段    alter table 表名  add  字段名  字段的类型 例子:        alter table table1 add transactor varchar(10) not Null; alter table   table1 add id int unsigned not Null auto_increment primary key 在mysql数据库中怎样在指定的一个字段后面添加一个字段: alter table newexample add address

js访问外部的css 来修改样式

js访问外部的css 来修改样式,布布扣,bubuko.com

原生JS获取HTML样式并修改

大家都知道在JavaScript原生操作中获取元素的样式,在实际操作是使用时比较频繁的一件事,这里像大家介绍下获取css样式的方法,希望可以帮助一些需要的人,如果有幸被大牛看到,有更好的办法,欢迎提出!!! 一. 行内元素样式获取: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js获取外部样式</title

js/java 获取、添加、修改、删除cookie(最全)

一.cookie介绍 1.cookie的本来面目 HTTP协议本身是无状态的.什么是无状态呢,即服务器无法判断用户身份.Cookie实际上是一小段的文本信息(key-value格式).客户端向服务器发起请求,如果服务器需要记录该用户状态,就使用response向客户端浏览器颁发一个Cookie.客户端浏览器会把Cookie保存起来.当浏览器再请求该网站时,浏览器把请求的网址连同该Cookie一同提交给服务器.服务器检查该Cookie,以此来辨认用户状态. 2.cookie本来运行机制 当用户第一

Jquery EasyUI的添加,修改,删除,查询等基本操作介绍

http://www.jb51.net/article/42016.htm 初识Jquery EasyUI看了一些博主用其开发出来的项目,页面很炫,感觉功能挺强大,效果也挺不错,最近一直想系统学习一套前台控件,于是在网上找了一些参考示例.写了一些基本的增删改查功能,算是对该控件的基本入门.后续有时间继续深入学习. 在学习jquery easyui前应该先到官网下载最新版本http://www.jeasyui.com/download/index.php 先看一下运行后的页面 1.列表展示 2.新

datagrid 添加、修改、删除(转载)

原链接:JQueryEasyUI学习笔记(十)datagrid 添加.修改.删除 基于datagrid框架的删除.添加与修改: 主要是批量删除,双击表单修改.选中行修改,增加行修改,再有就是扩展editor的方法,无需废话,直接上代码,代码中的注释写的很详细: <script type="text/javascript" charst="utf-8">var editFlag = undefined;//设置一个编辑标记 //因为layout框架指向hr

百度地图:普通覆盖物,以及多边形覆盖物,及他们的描述信息的添加,修改,删除,查看功能,还有多边形根据名称查询功能;

版权所有,未经本人允许,禁止转载! 这个界面功能是,普通覆盖物,以及多边形覆盖物,及他们的描述信息的添加,修改,删除,查看功能,还有多边形根据名称查询功能: 由于这个界面的数据是存在数据库,还有后台代码,所以这个页面无法直接使用: <%@ page contentType="text/html;charset=UTF-8"%> <%@ include file="/WEB-INF/views/include/taglib.jsp"%> <

bootstrap jQuery Ztree异步加载数据,check选择&amp;可添加、修改、删除节点

效果图: 一.下载zTree插件 地址:http://www.ztree.me 二.html代码 <link href="../Scripts/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" /> <script src="../Scripts/zTree/js/jquery-1.4.4.min.js"></script> <script src