jQuery实现table表格隔行换色鼠标经过变色

最新推荐文章于 2021-08-19 16:36:26 发布

jaray

最新推荐文章于 2021-08-19 16:36:26 发布

阅读量785

点赞数

分类专栏： ajax js

js 同时被 2 个专栏收录

60 篇文章

订阅专栏

ajax

26 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现的简单隔行变色效果。通过为不同行添加不同的背景颜色来增强表格的可读性，并且当鼠标悬停在某一行时，该行会变为白色背景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//初学者可以看下挺简单的实现方法

<!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=utf-8" />
<title>隔行变色</title>
<style type="text/css">
.one{
	background:#C00;
	}
.two{
		background:#09F;
	}
.three{
		background:#039;
	}
.four{
		background:#FFF;
		}
</style>
<script type="text/javascript" language="javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
	      
	$("tr").mouseover(function(){
		$(this).addClass("four");
		})
	$("tr").mouseout(function(){
		$(this).removeClass("four");
		})
	$("tr:first").addClass("three");
	$("tr:last").addClass("three");
	$("tr:even").addClass("one");
	$("tr:odd").addClass("two");
	});
</script>
</head>
<body>
<table width="300" border="1" class="table_gehang">
  <tr class="title">
    <td>你好吗</td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
</body>
</html>