JS实现 类的 1.判断 2.添加 3.删除 4切换
2024-09-04 17:11:07
<!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.切换
最新文章
- java 对象序列化与反序列化
- PHP 批量生成静态文件目录代码
- cocos2d-x CCScrollView和CCTableView的使用(转载)
- 使用Github管理项目代码的版本
- mysql的初识--DOS下的简单命令
- RootKit学习之 IDT Hook
- NOIP2014 无线网络发射器选址
- c++ 控制台流和字符串流
- nosql学习一
- Webstorm 激活破解
- 【微信小程序canvas】实现小程序手写板用户签名(附代码)
- Protege4.3 添加Rules 栏
- optional install error: Package require os(darwin) not compatible with your platform(win32)
- maven坑-Failure to transfer org.apache.maven:maven
- 让富文本编辑器支持复制doc中多张图片直接粘贴上传
- git命令:全局设置用户名邮箱配置
- CAS 服务端数据库认证
- 20145307陈俊达《网络对抗》Exp3 免杀原理与实践
- Oracle之SYSDBA的使用
- 分治算法——Karastsuba算法
热门文章
- 有关 java 不定参数
- MongoDB 倾向于将数据都放在一个 Collection 下吗?
- return;测试
- 2016 Al-Baath University Training Camp Contest-1 I. March Rain —— 二分
- 人生苦短之Python发邮件
- @SuppressWarnings(&;quot;serial&;quot;)注解
- c语言之秒数算法
- MYSQL进阶学习笔记十三:MySQL 内存优化!(视频序号:进阶_31)
- Understand JavaScript Callback Functions and Use Them
- Learning Android ActionBar