JS实现 类的 1.判断 2.添加 3.删除 4切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="tb-pure.css" />
<style>
.fixed-tb{
width: 400px;
height: 200px;
margin: 0 auto;
overflow-y: auto;
}
</style>
</head>
<body>
<div class="fixed-tb">
<table id="web-table" class="tb-pure">
<tr>
<th>魔追大幅</th>
<th>魔追大幅</th>
<th>魔追大幅</th>
</tr>
<tr>
<td>魔追大幅</td>
<td>魔追大幅</td>
<td>魔追大幅</td>
</tr>
<tr>
<td>魔追大幅</td>
<td>魔追大幅</td>
<td>魔追大幅</td>
</tr>
<tr>
<td>魔追大幅</td>
<td>魔追大幅</td>
<td>魔追大幅</td>
</tr>
<tr>
<td>魔追大幅</td>
<td>魔追大幅</td>
<td>魔追大幅</td>
</tr>
<tr>
<td>魔追大幅</td>
<td>魔追大幅</td>
<td>魔追大幅</td>
</tr>
<tr>
<td>魔追大幅</td>
<td>魔追大幅</td>
<td>魔追大幅</td>
</tr>
</table>
</div>
<script type="text/javascript">
function hasClass(obj, cls) {
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
} function addClass(obj, cls) {
if (!hasClass(obj, cls)) obj.className += " " + cls;
} function removeClass(obj, cls) {
if (hasClass(obj, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg, ' ');
}
} function toggleClass(obj,cls){
if(hasClass(obj,cls)){
removeClass(obj, cls);
}else{
addClass(obj, cls);
}
}
var myTrs = document.getElementsByTagName("tr");
for(var i = 0; i < myTrs.length; ++i){
myTrs[i].onclick = function(){
toggleClass(this, "selected");
}
}
</script>
</body>
</html>
案例代码:表格点击选中和取消
function hasClass(obj, cls) {
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
} function addClass(obj, cls) {
if (!hasClass(obj, cls)) obj.className += " " + cls;
} function removeClass(obj, cls) {
if (hasClass(obj, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg, ' ');
}
} function toggleClass(obj,cls){
if(hasClass(obj,cls)){
removeClass(obj, cls);
}else{
addClass(obj, cls);
}
}
JS实现类的: 1.判断 2.添加 3.删除 4.切换
JS实现 类的 1.判断 2.添加 3.删除 4切换的更多相关文章
- js实现class样式的修改、添加及删除的方法
本文实例讲述了js实现class样式的修改.添加及删除的方法.分享给大家供大家参考.具体分析如下: 比较常见的js前端功能,通过修改标签的className实现相应的功能. 具体代码如下: <t ...
- JS框架avalon简单例子 行编辑 添加 修改 删除 验证
为什么要写这个例子:做表单的时候,表单包含主子表,对于子表的编辑,使用的是easyui datagrid的行编辑功能,由于业务比较复杂,实现起来比较麻烦,代码写的也很多,因为插件的封装,无法操作原始的 ...
- 多iframe使用tab标签方式添加、删除、切换的处理实例
紧接着上一篇随笔iframe的内容增高或缩减时设置其iframe的高度的处理方案 如果采用iframe来切换显示内容的方式来展现办公Web.那么需要解决几个问题 1.tab标签需要和显示的iframe ...
- js动态添加和删除标签
html代码 <h1>动态添加和删除标签</h1> <div id="addTagTest"> <table> <thead& ...
- 原生js添加和删除类
原生js添加和删除类: this.className +=" "; this.className = this.className.replace(" 原来的类" ...
- 原生JS动态添加和删除类
原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...
- 判断js数据类型和clone
判断返回js数据类型 function judgeType(arg){//判断返回js数据类型 return Object.prototype.toString.call(arg).slice(8,- ...
- JS:操作样式表2 :用JS实现添加和删除一个类名的功能(addClass()和removeClass())
var box = document.getElementById("box"); box.id = "pox"; 将id = “box”,改为id = “po ...
- jQuery——类的添加与删除
添加类:addClass 删除类:removeClass 判断类是否存在:hasClass <!DOCTYPE html> <html lang="en"> ...
随机推荐
- [数据挖掘课程笔记]基于规则的分类-顺序覆盖算法(sequential covering algorithm)
Rule_set = {}; //学习的规则集初试为空 for 每个类c do repeat Rule = Learn_One_Rule(D,Att-vals,c) 从D中删除被Rule覆盖的元组; ...
- 人生苦短之Python类的一二三
在Python中,类也是以class开头定义的.我们定义一个动物类,它有名字和年龄,在java变量有实例变量和局部变量,方法内的变量是局部变量,类里面的变量是实例变量.那么在Python中的类及其属性 ...
- python string写入二进制文件——直接wb形式open file,再write string即可
4 down vote accepted You misunderstood what \xhh does in Python strings. Using \x notation in Python ...
- 【CQ18高一暑假前挑战赛2】标程
[昨晚打校赛,5个小时打完很累了,所以搞忘出题了...对不起学弟们,不过出的题都亲自写过一遍,可以保证题目和代码长度都不长,题目难度不大] [A:bush博弈] #include<bits/st ...
- Linux启动eclipse报错找不到java环境解决方法
在Linux mint下,前几天还用得很好的的eclipse,今天开机不知为什么这样. Eclipse 3.6 在 linux mint 12 可以在终端顺利启动Eclipse,但是鼠标双击,或者用起 ...
- jquery.Datatable.js
http://www.cnblogs.com/nier/archive/2012/03/18/2404836.html http://blog.csdn.net/mickey_miki/article ...
- springmvc源码分析系列-请求处理流程
接上一篇-springmvc源码分析开头片 上一节主要说了一下springmvc与struts2的作为MVC中的C(controller)控制层的一些区别及两者在作为控制层方面的一些优缺点.今天就结合 ...
- nohup不输出日志信息的方法及linux重定向
最近使用nohup创建了一个后台进程,默认日志输出到了nohup.out文件中,程序跑起来也就没再管,过了大约一周,发现硬盘空间不够了,于是查找原因,发现这个nohup.out文件已经到了70G了,导 ...
- A - Toy Cars
Time Limit:1000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Description Little ...
- 1.25-1.26 Coordinator数据集和oozie bundle
一.Coordinator数据集 二.oozie bundle