一.表格隔行变色效果
效果如下:
1.分析:
①.使用 鼠标经过onmouseover 鼠标离开onmouseout
②.鼠标经过tr行,当前的行改变背景颜色,鼠标离开去掉当前背景色
③.第一行(thead里面的行)不需要变颜色,因此我们获取的是tbody里面的行
2.代码如下
<style>
thead{
background-color: cadetblue;
}
.bg{
background-color: pink;
}
</style>
<script type="text/javascript">
window.onload=function(){
var trs=document.querySelector("tbody").querySelectorAll("tr"); //获取tbody中所有的行
for(i=0;i<trs.length;i++){
trs[i].onmouseover=function(){
this.className="bg";
}
trs[i].onmouseout=function(){
this.className="";
}
}
}
</script>
<body>
<table border="1px" cellspacing="0" >
<thead>
<tr>
<th>代码</th>
<th>名称</th>
<th>最近公布净值</th>
<th>累计净值</th>
<th>前单位净值</th>
<th>净值增长率</th>
</tr>
</thead>
<tbody>
<tr>
<td>003526</td>
<td>3月定期开放债券</td>
<td>1.075</td>
<td>1.074</td>
<td>1.079</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003527</td>
<td>3月定期开放债券</td>
<td>1.075</td>
<td>1.074</td>
<td>1.079</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003528</td>
<td>3月定期开放债券</td>
<td>1.075</td>
<td>1.074</td>
<td>1.079</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003529</td>
<td>3月定期开放债券</td>
<td>1.075</td>
<td>1.074</td>
<td>1.079</td>
<td>+0.047%</td>
</tr>
</tbody>
</table>
</body>
二.表单全选案列
效果如下:
1.分析:
①.全选和取消全选 ->让所有复选框的checked属性(选中状态)跟随全选按钮即可
②.所有复选框选中后 全选框自动选中 -> 每次点击循环查看下面复选框是否有没被选中的,有的话上面就不全选
③.设置一个变量控制全选框是否选中
2.代码如下
<script type="text/javascript">
window.onload=function(){
var j_cball=document.getElementById('j_cball');
var j_tbs=document.querySelector('#j_tb').querySelectorAll('input');
j_cball.onclick=function(){
//this.checked; //可以得到当前选中状态,选中为true,未选为false
for(var i=0;i<j_tbs.length;i++){
j_tbs[i].checked=this.checked; //让下面复选框状态等于全选框
}
}
for(i=0;i<j_tbs.length;i++){ //给每个复选框都绑定点击事件
j_tbs[i].onclick=function(){
var flag=true;
for(i=0;i<j_tbs.length;i++){ //每次点击都检查所有复选框状态
if(!j_tbs[i].checked){ //如果有一个复选框没被选中,就不用再判断(缩短循环时间)
flag=false;
break;
}
}
j_cball.checked=flag;
}
}
}
</script>
<body>
<table border="1" cellspacing="0">
<thead>
<tr>
<th>
<input type="checkbox" id="j_cball">
</th>
<th>商品</th>
<th>价格</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox">
</td>
<td>华为p100</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>iphone18</td>
<td>6000</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>诺基亚N97</td>
<td>1</td>
</tr>
</tbody>
</table>
</body>
三.tab栏切换案例
效果如下:
1.分析:
①.点击某个选项,当前底色变为红色,其余不变(排他思想)修改类名为current
②.下面的模块内容,会随着上面的选项卡变化,所以下面模块的变化也写进点击事件
③.要让下面的展示模块和上面的一一对应,给li中添加自定义属性,从0开始编号
④.当我们点击某个li,让item里面对应序号的显示,其余隐藏(排他)
2.代码如下:
<style>
.tab_list{
height: 39px;
width: 740px;
border-bottom: 2px solid red;
background-color: #F7F7F7;
}
.tab_list li{
display: flex;
float: left;
height: 39px;
line-height: 39px;
padding: 0 30px;
text-align: center;
cursor: pointer;
list-style: none; /* 去掉前缀. */
}
.tab_list .current{
background-color: #c81623;
color: #fff;
}
.item{
display: none;
}
</style>
<script type="text/javascript">
window.onload=function(){
var li=document.querySelectorAll('li');
var item=document.querySelectorAll('.item');
//var item=document.getElementsByClassName('item');
for(i=0;i<li.length;i++){
li[i].setAttribute('index',i); //给所有li设置自定义属性
li[i].onclick=function(){ //给所有li绑定点击事件
for(i=0;i<li.length;i++){
li[i].className=''; //先让每个li的class为空
}
this.className='current'; //让当前点击的li的calss为current
var index=this.getAttribute('index'); //得到当前点击li的index值
for(i=0;i<item.length;i++){
item[i].style.display='none'; //先全部隐藏
}
item[index].style.display='block'; //将index赋值给对应的item
}
}
}
</script>
<body>
<div class="tab">
<div class="tab_list">
<ul> <!-- ul无序列表,li用在无序列表中 -->
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价(5000+)</li>
<li>社区互动</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">商品介绍模块</div> <!-- block 改成块,并且显示 -->
<div class="item">规格与包装模块</div>
<div class="item">售后保障模块</div>
<div class="item">商品评价模块</div>
<div class="item">社区互动模块</div>
</div>
</div>
</body>
791
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
