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:
Publicación traducida automáticamente
Artículo escrito por sayantanbose2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA