zoukankan      html  css  js  c++  java
  • 表格改变颜色

    <table id="tb">
    <tbody>
    <tr><td>第一行</td><td>第一行</td></tr>
    <tr><td>第二行</td><td>第二行</td></tr>
    <tr><td>第三行</td><td>第三行</td></tr>
    <tr><td>第四行</td><td>第四行</td></tr>
    <tr><td>第五行</td><td>第五行</td></tr>
    <tr><td>第六行</td><td>第六行</td></tr>
    </tbody>
    </table>
    

      js代码

    <script type="text/javascript">
    window.onload = function(){ //页面所有元素加载完毕
    	var item  =  document.getElementById("tb");			//获取id为tb的元素(table)
    	var tbody =  item.getElementsByTagName("tbody")[0];	//获取表格的第一个tbody元素
    	var trs =   tbody.getElementsByTagName("tr");	        //获取tbody元素下的所有tr元素
    	for(var i=0;i < trs.length;i++){//循环tr元素
    		if(i%2==0){        //取模. (取余数.比如 0%2=0 , 1%2=1 , 2%2=0 , 3%2=1)
    			trs[i].style.backgroundColor = "#888"; // 改变 符合条件的tr元素 的背景色.
    		}
    	}
    }
    </script>
    

      jq代码

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <script language="javascript" >
    	$(function(){// dom元素加载完毕
    	   $('#tb tbody tr:even').css("backgroundColor","#888");
    	   //获取id为tb的元素,然后寻找他下面的tbody标签,再寻找tbody下索引值是偶数的tr元素,
    	   //改变它的背景色.
    	})
    </script>
    

      

  • 相关阅读:
    4.内核编译和裁剪
    2.Linux技能要求
    3.字符驱动框架
    1.Linux命令
    4.类和抽象
    3.指针
    2.C++语言特性
    1.编译器
    计数排序——Counting Sort
    网关、网桥、路由器、集线器
  • 原文地址:https://www.cnblogs.com/Xuman0927/p/5264511.html
Copyright © 2011-2022 走看看