Xuman0927
<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>

  

分类:

技术点:

相关文章:

  • 2021-11-27
  • 2021-12-10
  • 2021-11-21
  • 2021-08-06
  • 2021-12-23
  • 2021-08-30
  • 2018-04-04
  • 2021-11-16
猜你喜欢
  • 2021-12-19
  • 2021-12-19
  • 2021-10-16
  • 2021-09-27
  • 2021-12-07
  • 2021-04-26
  • 2022-01-03
相关资源
相似解决方案