js操作表格目的隔行换色
2017-06-16 01:07
471 查看
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript">
window.onload = function()
{
var tables = document.getElementsByTagName("table"); //、此处不能用ID，CLASS替代！！！
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.background = "cornflowerblue";
odd = false;
}
else
{
odd = true;
}
}
}
//
var rowss = document.getElementsByTagName("tr"); //此处 注意
for (var j = 0; j < rowss.length; j++)
{
rowss[j].onmouseover = function()
{
this.style.fontWeight = "bold";
}
rowss[j].onmouseout = function()
{
this.style.fontWeight = "none";
}
}
}
// function bs ()
// {
// var tables = document.getElementsByTagName("table");
// var rows;
// rows = document.getElementsByTagName("tr"); //此处 注意
// for (var j = 0; j < rows.length; j++)
// {
// rows[j].onmouseover = function()
// {
// this.style.fontWeight = "bold";
// }
// rows[j].onmouseout = function()
// {
// this.style.fontWeight = "none";
// }
// }
// }
</script>
<style type="text/css">
td{
width: 200px;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
</tr>
<tr>
<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
</tr>
<tr>
<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
</tr>
<tr>
<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
</tr>
<tr>
<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
</tr>
<tr>
<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
</tr>
<tr>
<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
</tr>
<tr>
<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
</tr>
<tr>
<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
</tr>
<tr>
<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
</tr>
<tr>
<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
</tr>
<tr>
<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
</tr>
<tr>
<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
</tr>
<tr>
<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
</tr>
<tr>
<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
</tr>
<tr>
<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
</tr>
<tr>
<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
</tr>
<tr>
<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
</tr>
<tr>
<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 