Js、jQuery、angular隔行换色
来源：互联网 发布：卫计委数据 编辑：程序博客网 时间：2024/06/05 06:11
angular隔行换色
<style> .css1{color:red;} .css2{color:blue;} </style></head><body><div ng-controller="aaa"> <P>ng-repeat指令：遍历集合</P> <ul>数据data输出,$even奇数项选择： <li ng-repeat="data in dataList" class="{{ $even ? 'css1': 'css2'}}">{{data}}</li> </ul></div></body>js隔行换色
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
</head>
<body>
<table border="1px" cellpadding="0dp" cellspacing="0dp" width="300px" height="200px">
<tr class="tr1">
<th>姓名</th>
<th>性别</th>
</tr>
<tr class="tr1">
<th>张三</th>
<th>男</th>
</tr>
<tr class="tr1">
<th>李四</th>
<th>女</th>
</tr>
<tr class="tr1">
<th>田七</th>
<th>女</th>
</tr>
<tr class="tr1">
<th>黑八</th>
<th>男</th>
</tr>
</table>
<input type="button" value="JS" id="aa"/>
<input type="button" value="jquery" id="bb"/>
<script type="text/javascript">
//js隔行换色
var aa=document.getElementById("aa");
aa.onclick=function f(){
//获取所有tr
//var tr1=document.getElementsByTagName("tr");这个也可以,是获取标签的名称
var tr1=document.getElementsByClassName("tr1")
for(var i=0;i<tr1.length;i++){
if(i%2==0){
tr1[i].style.background="red";
}else{
tr1[i].style.background="yellowgreen";
}
}
}
//隔行变色
//even 偶数 从0开始
//odd 奇数
$("#bb").click(function (){
$("tr:even").css("background","aqua");
$("tr:odd").css("background","plum");
});
//鼠标悬停变色
$("tr:even").hover(function(){
$(this).css("background","bisque");
},function(){
$(this).css({"background":"plum"});
});
</script>
</body>
</html>
阅读全文
0 0
- Js、jQuery、angular隔行换色
- angular隔行换色效果
- JQuery隔行换色
- jQuery 隔行换色
- Jquery-隔行换色
- js隔行换色
- 隔行换色js
- jQuery表格隔行换色
- JQuery - 表格隔行换色
- jquery 实现隔行换色
- jquery实现隔行换色
- js实现隔行换色
- JS实现隔行换色
- angular jQuery css html混合table表格查询 排序 添加 删除 隔行换色
- angular js 循环数据（死数据） 添加数据 隔行换色 单个删除 排序
- thinkphp和jquery隔行换色
- jquery实现隔行换色效果
- 使用jQuery隔行换色效果
- CentOS 和Windows 下配置MySQL远程访问
- win10装Ubuntu双系统笔记
- 一台机子上运行多个mysql实例
- pandas教程--------计数统计（12/4）
- 阿里云专用网络mail邮件发送
- Js、jQuery、angular隔行换色
- [编译链接装载系列]之聊聊目标文件与ELF格式
- SSH与SSM学习之SSH实现CRM练习11——文件上传
- python enumerate用法总结
- Python-ML中最常用的5张速查表
- 整数变换问题
- java基础之变量覆盖？
- 开源数据处理框架Spark
- Java 涨知识
