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>
    

      

  • 相关阅读:
    安装RabbitMQ说明
    死锁
    管程
    MybatisPlus快速开发
    了解Mybatis-Plus
    查看监听器状态
    The command supports no service 解决办法
    任务11 Arduino光照报警器
    任务10 测试光的强度实验
    任务9 Arduino光敏实验
  • 原文地址:https://www.cnblogs.com/Xuman0927/p/5264511.html
Copyright © 2011-2022 走看看