jquery ui 简单的 table

最新推荐文章于 2018-08-25 23:35:17 发布

a771948524

最新推荐文章于 2018-08-25 23:35:17 发布

阅读量4.8k

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/zxlstudio/article/details/17638545

版权

Jquery 专栏收录该内容

23 篇文章 2 订阅

订阅专栏

<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>

a771948524

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery ui 简单的 table

$(document).ready(function(){ //jQuery ready is quicker than onload $(".stripeMe tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");}); $
复制链接

扫一扫