En este artículo, estableceremos el resaltado en una fila de tabla alternativa usando jQuery. El selector :nth-child(2n) se usa para seleccionar la fila alternativa y el método addClass() se usa para establecer el estilo de las filas alternativas.
Sintaxis:
$(tr:nth-child(2n)").addClass("GFG");
Aquí, crearemos una tabla simple usando la etiqueta <table> . Las etiquetas <thead> y <tbody> se utilizan para crear elementos de encabezado y cuerpo de la tabla. Usamos algunas propiedades CSS para establecer los estilos.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to highlight alternate
table row using jQuery?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
table {
margin: 0 auto;
}
tr,
th,
td {
border: 2px solid black;
padding: 20px 50px;
}
th {
background-color: green;
}
.GFG {
background: rgb(145, 145, 145);
}
</style>
<script>
$(document).ready(function () {
$("table tbody tr:nth-child(2n)").addClass("GFG");
});
</script>
</head>
<body style="text-align: center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
How to highlight alternate
table row using jQuery?
</h3>
<table>
<thead>
<tr>
<th>Sl.No</th>
<th>Title</th>
<th>Geek_id</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>HTML</td>
<td>Markup Language</td>
</tr>
<tr>
<td>02</td>
<td>CSS</td>
<td>Cascading Style</td>
</tr>
<tr>
<td>03</td>
<td>JavaScript</td>
<td>Scripting Language</td>
</tr>
<tr>
<td>04</td>
<td>Bootstrap</td>
<td>Framework</td>
</tr>
</tbody>
</table>
</body>
</html>
Producción:
