jQuery: создание табличного эффекта «Полосы зебры»

Последнее обновление 21 сентября 2018 11:14:38 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

JQuery Практическое упражнение. Часть I: Упражнение 7

Создайте табличный эффект «Полосы зебры».

Пример решения:

HTML-код:

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
<style type="text/css">.table_style {
	width: 500px;
	margin: 0px auto;
	}
	table{
	width: 100%;
	border-collapse: collapse;
	}
	table tr td{
	width: 50%;
	border: 1px solid #ff751a;
	padding: 5px;
	}
	table tr th{
	border: 1px solid #79ff4d;
	padding: 5px;
	}
	.zebra{
	background-color:  #ff0066;
	}
	</style>
  <title>Create a Zebra Stripes table effect</title>
</head>
<body>
<div class="table_style">
<table>
	<tr>
		<th>Student Name</th>
		<th>Marks in Science</th>
	</tr>
	<tr>
		<td>Janet</td>
		<td>85.00</td>
	</tr>
	<tr>
		<td>David</td>
		<td>92.00</td>
	</tr>
	<tr>
		<td>Arthur</td>
		<td>79.00</td>
	</tr>
	<tr>
		<td>Bill</td>
		<td>82.00</td>
	</tr>
</table>
</div>
</body>
</html>

Код JavaScript:

$(document).ready(function(){
	$("tr:odd").addClass("zebra");
});

См. Pen jquery- Practical -упражнение-7 от w3resource ( @ w3resource ) на CodePen .

Внесите свой код и комментарии через Disqus.

Предыдущий: Blink текст с помощью jQuery.
Далее: распечатать страницу с помощью jQuery.