标签：
作为一个前端小白，感觉前端还是蛮适合自己的，工作也很开心。然而为一个JavaScript小白中的小白，我决定好好学习/(ㄒoㄒ)/~~以前也看过不少JavaScript的相关资料，一直模棱两可没有认真学习总结。现在工作中逐渐认识到了其重要性，并且在实践过程中发现了JavaScript的无穷乐趣。从今天开始做好笔记总结。加油吧孩子！
1、表格：
首先，简单的布局一个表格
<table id="tid"> <thead> <tr style=""> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> </tr> </thead> <tbody> <tr> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> </tr> <tr> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> </tr> <tr> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> </tr> <tr> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> </tr> </tbody> </table>
css：
<style>
.even{
text-align: center;
background-color:#f6bfbc;
}
.odd{
text-align: center;
background-color: #80aba9;
}
</style>
页面加载时，表格主体奇偶行分配不同颜色
//方法一，通过脚本样式改变背景颜色
window.onload=function(){
var tid=document.getElementById("tid");
var tb=tid.getElementsByTagName("tbody")[0];
var trs=tb.getElementsByTagName("tr");
for(i=0 ;i<trs.length; i++){
if( i%2 == 0 )
trs[i].style.backgroundColor="#80aba9";
else
trs[i].style.backgroundColor="#f6bfbc";
};
}
//方法二，通过添加class改变背景颜色
window.onload=function(){
var tid=document.getElementById("tid");
var tb=tid.getElementsByTagName("tbody")[0];
var trs=tb.getElementsByTagName("tr");
for(i=0;i<trs.length;i++){
if(i%2==0)
trs[i].className="even";
else
trs[i].className="odd";
}
}
//方法二的简化方法
window.onload=function(){
var tid=document.getElementById("tid");
var tb=tid.getElementsByTagName("tbody")[0];
var trs=tb.getElementsByTagName("tr");
for(i=0;i<trs.length;i++){
trs[i].className=(i%2==0)?"even":"odd";
}
}
鼠标悬停，表格根据奇偶行分配不同颜色
//方法一：添加样式
window.onload=function(){
var tid=document.getElementById("tid");
var tb=tid.getElementsByTagName("tbody")[0];
var trs=tb.getElementsByTagName("tr");
for(i=0;i<trs.length;i++){
if(i%2==0){
trs[i].onmouseover=function(){
this.style.backgroundColor="red";
}
trs[i].onmouseout=function(){
this.style.backgroundColor=""
}
}else{
trs[i].onmouseover=function(){
this.style.backgroundColor="green";
}
trs[i].onmouseout=function(){
this.style.backgroundColor=""
}
}
}
}
//方法二：改变class
window.onload=function(){
var tid=document.getElementById("tid");
var tb=tid.getElementsByTagName("tbody")[0];
var trs=tb.getElementsByTagName("tr");
for(i=0;i<trs.length;i++){
if(i%2==0){
trs[i].onmouseover=function(){
this.className="odd";
}
trs[i].onmouseout=function(){
this.className="";
}
}else{
trs[i].onmouseover=function(){
this.className="even";
}
trs[i].onmouseout=function(){
this.className="";
}
}
}
}
2、复选框全选：
首先，简单布局
<input type="checkbox" id="all" onclick="checkAll()">全选</br> <input type="checkbox" name="check">yes</br> <input type="checkbox" name="check">yes</br> <input type="checkbox" name="check">yes</br> <input type="checkbox" name="check">yes</br> <input type="checkbox" name="check">yes</br>
function checkAll(){
var all=document.getElementById("all");
var check=document.getElementsByName("check");
for(i=0;1<check.length;i++){
check[i].checked=all.checked;
}
}
标签：
原文地址：http://www.cnblogs.com/HaiLian/p/5779059.html
