<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8" />
<style>
.back{
background:#005aa0;
}
</style>
<script>
/**
* 隔行变色
*/
function change(){
//1、获取 table 元素
var tbl = document.getElementById("tbl");
//2、获取 table 中的 tbody 元素
var tbody = tbl.getElementsByTagName("tbody")[0];
//3、获取 tbody 中的所有 tr 元素
var trs = tbody.getElementsByTagName("tr");
//4、判断 tr 的奇偶性,改变背景
var length = trs.length;
for(var i=0;i<length;i++){
if(i % 2 == 0){
trs[i].className="back";
}
}
}
</script>
</head>
<body>
<button οnclick="change()">变</button>
<table id="tbl">
<thead>
<tr>
<th>姓名</th>
<th>工资</th>
<th>入职时间<
利用Javascript实现隔行变色
最新推荐文章于 2024-05-24 01:29:18 发布