Como criar um efeito de tabela Zebra Stripes usando jQuery?
Dado um documento HTML com uma tabela, a tarefa é criar um efeito de tabela Zebra Stripes na tabela usando jQuery.
Abordagem: para obter o efeito de tabela Zebra Stripes, use o snippet de código abaixo:
$(function() { $("table tr:nth-child(odd)").addClass("zebrastripe"); });
Na função acima, zebrastripe é o nome da classe usado e ímpar representa que o número ímpar de linhas terá listras coloridas.
Para alterar as listras das linhas pares, basta usar:
$(function() { $("table tr:nth-child(even)").addClass("zebrastripe"); })
Na demonstração a seguir da abordagem acima, o jQuery-3.5.1.js contém o código-fonte.
Exemplo: Abaixo está a demonstração da abordagem acima.
<html>
<head>
<title>jQuery Zebra Stripes Demonstration</title>
<script type="text/javascript" src=
"https://code.jquery.com/jquery-3.5.1.js">
</script>
<script type="text/javascript">
$(function() {
$("table tr:nth-child(odd)")
.addClass("zebrastripe");
});
</script>
<style type="text/css">
body,
td {
font-size: 10pt;
text-align: center;
}
h1 {
color: green;
}
table {
background-color: black;
border: 1px black solid;
border-collapse: collapse;
}
th {
font-size: 15px;
padding: 5px 8px;
border: 1px outset silver;
background-color: rgb(197, 69, 69);
color: white;
}
tr {
border: 1px outset silver;
padding: 5px 8px;
background-color: white;
margin: 1px;
}
tr.zebrastripe {
background-color: green;
}
td {
border: 0.5px outset silver;
border-collapse: collapse;
padding: 5px 8px;
}
.center {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<table class="center">
<tr>
<th>ID</th>
<th>Course</th>
<th>Price</th>
</tr>
<tr>
<td>1</td>
<td>Fork CPP</td>
<td>Free</td>
</tr>
<tr>
<td>2</td>
<td>DSA</td>
<td>2499</td>
</tr>
<tr>
<td>3</td>
<td>Fork Java</td>
<td>Free</td>
</tr>
<tr>
<td>5</td>
<td>Linux</td>
<td>599</td>
</tr>
<tr>
<td>6</td>
<td>Fork Python</td>
<td>Free</td>
</tr>
</table>
</body>
</html>
Saída:
Resultado da demonstração acima
As postagens do blog Acervo Lima te ajudaram? Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando.
70% das doações são no valor de R$ 5,00...
Diógenes Lima da Silva