jquery ui 简单的 table

最新推荐文章于 2017-09-29 15:43:22 发布

a771948524

最新推荐文章于 2017-09-29 15:43:22 发布

阅读量4.9k

点赞数

分类专栏： Jquery

本文链接：https://blog.youkuaiyun.com/zxlstudio/article/details/17638545

版权

Jquery 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的表格交互效果，包括鼠标悬停时改变行背景颜色及为表格行添加交替颜色等，提高了表格的易读性和用户体验。

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

<html>
<head>
<script type="text/javascript" src="http://oss.infoscience.co.jp/jquery/ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>

<script type="text/javascript">
$(document).ready(function(){
    //jQuery ready is quicker than onload
    $(".stripeMe tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");});
    $(".stripeMe tr:even").addClass("alt");
});
</script>
<style type="text/css">
table.sample {
	border-collapse: collapse;
	width: 50%;
	margin: 24px;
	font-size: 1.1em;
}

table.sample th {
	background: #3e83c9;
	color: #fff;
	font-weight: bold;
	padding: 2px 11px;
	text-align: left;
	border-right: 1px solid #fff;
	line-height: 1.2;
}

table.sample td {
	padding: 6px 11px;
	border-bottom: 1px solid #95bce2;
	vertical-align: top;
}

table.sample td * {
	padding: 6px 11px;
}

table.sample tr.alt td {
	background: #ecf6fc;
}

table.sample tr.over td {
	background: #bcd4ec;
}
</style>
<table class="stripeMe sample">

	<thead>

		<tr>
			<th>Lorem</th>
			<th>Ipsum</th>
			<th>Dolor</th>
			<th>Sit</th>

			<th>Amet</th>

		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Lorem</td>
			<td>Ipsum</td>

			<td>Dolor</td>

			<td>Sit</td>
			<td>Amet</td>
		</tr>
		<tr>
			<td>Lorem</td>

			<td>Ipsum</td>
			<td>Dolor</td>

			<td>Sit</td>
			<td>Amet</td>
		</tr>
		<tr>

			<td>Lorem</td>
			<td>Ipsum</td>
			<td>Dolor</td>

			<td>Sit</td>
			<td>Amet</td>
		</tr>

		<tr>
			<td>Lorem</td>
			<td>Ipsum</td>
			<td>Dolor</td>

			<td>Sit</td>
			<td>Amet</td>

		</tr>
		<tr>
			<td>Lorem</td>
			<td>Ipsum</td>
			<td>Dolor</td>

			<td>Sit</td>

			<td>Amet</td>
		</tr>
		<tr>
			<td>Lorem</td>
			<td>Ipsum</td>
			<td>Dolor</td>

			<td>Sit</td>
			<td>Amet</td>
		</tr>
		<tr>
			<td>Lorem</td>
			<td>Ipsum</td>
			<td>Dolor</td>

			<td>Sit</td>
			<td>Amet</td>
		</tr>
		<tr>
			<td>Lorem</td>
			<td>Ipsum</td>

			<td>Dolor</td>

			<td>Sit</td>
			<td>Amet</td>
		</tr>
		<tr>
			<td>Lorem</td>

			<td>Ipsum</td>
			<td>Dolor</td>

			<td>Sit</td>
			<td>Amet</td>
		</tr>
		<tr>

			<td>Lorem</td>
			<td>Ipsum</td>
			<td>Dolor</td>

			<td>Sit</td>
			<td>Amet</td>
		</tr>

	</tbody>
</table>

</body>
</html>