JS与jQuery实现隔行变色的方法
27 浏览量
2020-10-21
13:37:06
上传
评论
收藏 83KB PDF 举报
JS与与jQuery实现隔行变色的方法实现隔行变色的方法
主要介绍了JS与jQuery实现隔行变色的方法,结合实例形式对比分析了javascript与jQuery实现隔行变色的具体操
作步骤与相关技巧,体验一下jQuery的华丽与简洁,需要的朋友可以参考下
本文实例讲述了JS与jQuery实现隔行变色的方法。分享给大家供大家参考，具体如下：
传统的JS方法：
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>
</head>
<body>
<table id="tb" border="0" cellpadding="0" cellspacing="0">
<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>
</body>
</html>
使用JQ来隔行变色：
<script language="javascript" >
$(function(){// dom元素加载完毕
$('#tb tbody tr:even').css("backgroundColor","#888");
//获取id为tb的元素,然后寻找他下面的tbody标签，再寻找tbody下索引值是偶数的tr元素,
//改变它的背景色.
})
</script>
效果图：
超简单超简单JS实现表格隔行换背景色实现表格隔行换背景色
当需用TABLE表格表现大量数据的时候，如果没有较好的措施是很容易看花眼的，特别是在日常的网站后台管理工作，甚至
难免会出现误删数据的糗事，说多了都是泪，这是前端工程师必备的JS代码啊！
注意：BODY标记中需加上onload="xlh()"
以下为全部代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格隔行变色</title>
<script type="text/javascript">
function xlh(){
var tbl = document.getElementById("tbl");
var rows = tbl.rows.length;
for(var i=0;i<rows;i++){
if(i%2 == 0){
tbl.rows[i].style.backgroundColor = "#cccccc";
}
}
}
评论0
最新资源