Dado un documento HTML con una tabla y la tarea es crear un efecto de tabla Zebra Stripes en la tabla usando jQuery.
Enfoque: para lograr el efecto de la tabla Zebra Stripes, use el siguiente fragmento de código:
$(function() {
$("table tr:nth-child(odd)").addClass("zebrastripe");
});
En la función anterior, zebrastripe es el nombre de la clase que se usa e impar representa que un número impar de filas tendrá rayas de colores.
Para cambiar las franjas de filas pares , simplemente use:
$(function() {
$("table tr:nth-child(even)").addClass("zebrastripe");
})
En la siguiente demostración del enfoque anterior, jQuery-3.5.1.js contiene el código fuente.
Ejemplo: A continuación se muestra la demostración del enfoque anterior.
HTML
<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>
Producción:
Salida de la demostración anterior
Publicación traducida automáticamente
Artículo escrito por sayantanbose2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA