table的行交替改变样式 CSS3 和 js两种实现
/*我刚看到一个方案 就是为元素更新className属性 通过更新 来改变外部的呈现 直接element.className = value; 实现的不是追加 是更新 看下面的这个函数
function addClass(element,value) {
if(!element.className)
{
element.className = value;
} else {
newClassName =
element.className;
newClassName += " "; //新追加的class属性 要加空格
newClassName +=
value;
element.className = newClassName;
}
}
}*/
<!DOCTYPE html>
<html>
<head>
<meta
charset="UTF-8" />
<title>css
test</title>
<style
type="text/css">
table
{
margin:
auto;
border: 1px
solid black;
}
td {
width: 20px;
padding: 5px;
}
tr:nth-child(odd)
{
background-color:
red; //table的奇数行背景色是红色
}
tr:nth-child(even)
{ //table的偶数行背景色为蓝色
background-color: blue;
}
</style>
</head>
<body>
<table>
<tr>
<td>姓名</td>
<td>noodles</td>
</tr>
<tr>
<td>年龄</td>
<td>28</td>
</tr>
<tr>
<td>体重</td>
<td>88</td>
</tr>
<tr>
<td>爱好</td>
<td>电影</td>
</tr>
</table>
</body>
</html>
js 实现
<!DOCTYPE html>
<html>
<head>
<meta
charset="UTF-8" />
<title>css
test</title>
<style
type="text/css">
table
{
margin:
auto;
border: 1px
solid black;
}
td {
width: 20px;
padding: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<td>姓名</td>
<td>noodles</td>
</tr>
<tr>
<td>年龄</td>
<td>28</td>
</tr>
<tr>
<td>体重</td>
<td>88</td>
</tr>
<tr>
<td>爱好</td>
<td>电影</td>
</tr>
</table>
<script
type="text/javascript">
function
tableStyle() { //这个函数实现了为每个页面中的table元素实现的tr的css隔行设置
if(!document.getElementsByTagName)
{
return false;
}
var
tables = document.getElementsByTagName("table");
var odd,rows;
for(var i = 0;i <
tables.length;i++) {
odd = false;
rows =
tables[i].getElementsByTagName("tr");
for(var j = 0;j <rows.length;j++)
{
if(odd === true ) { //用=== 做判断 不会有转换
rows[j].style.backgroundColor = "red"; //CSS属性是
background-color 在js中体现是 backgroundColor 驼峰命名 因为js 会将background-color中的- 识别为减
后面的color 认为是一个变量
odd = false;
} else {
rows[j].style.backgroundColor = "blue";
odd = true;
}
}
}
}
function addLoadEvent(func)
{//这个函数是功能是可以让一些函数在页面加载完成后运行
var oldonload = window.onload;
if(typeof window.onload !=
‘function‘) {
window.onload = func;
} else {
oldonload();
func();
}
}
addLoadEvent(tableStyle);
</script>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
