En este artículo, veremos cómo hacer una tabla seleccionando las filas alternas, es decir, seleccionando las filas pares o impares haciendo clic en los botones respectivos. Esta característica puede ser útil al momento de seleccionar los datos/elementos específicos de cualquiera de las filas o para resaltar la tabla de datos para su visualización desde el gran conjunto de datos. Esto nos permite revisar rápidamente la tabla de un vistazo. Podemos lograr lo mismo seleccionando las filas pares o impares usando los selectores tr: impar o tr: par en la tabla. El índice de fila comienza desde 0 en las tablas HTML. Usaremos jQuery para seleccionar cualquiera de las filas haciendo clic en el botón.
Para usar jQuery en el archivo HTML, agregaremos la siguiente sintaxis dentro de la etiqueta <head>.
<script src="https://code.jquery.com/jquery-3.6.0.min.js" letegrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"> </script>
Sintaxis para seleccionar filas impares:
$("table tr:odd").css({"property":"value",
"property": "value"});
Sintaxis para seleccionar filas pares:
$("table tr:even").css({"property":"value",
"property": "value"});
Acercarse:
- Diseñe una tabla que contenga los datos. Utilice las propiedades de estilo requeridas para resaltar las diferentes filas a fin de diferenciar los datos de fila.
- Use «tr: impar» para seleccionar los datos impares y use «tr: par» para seleccionar los datos pares en la fila.
Ejemplo: en este paso, crearemos una tabla que tenga la fila de la tabla y la columna de la tabla y usaremos la sintaxis anterior para la selección de filas.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<title>Geeks for Geeks</title>
<!-- Including jQuery -->
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
letegrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
h1 {
color: #006600;
}
button {
color: white;
background-color: #006600;
width: auto;
height: 30px;
}
body {
text-align: center;
}
div {
margin: 10px;
height: auto;
width: auto;
position: relative;
display: flex;
justify-content: center;
text-align: center;
display: flex;
}
table,
tr,
thead,
td {
border: 5px solid #006600;
border-collapse: collapse;
padding: 10px;
}
thead {
color: #006600;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<button id="odd">ODD ROWS</button>
<button id="even">EVEN ROWS</button>
<div>
<table>
<tbody>
<thead>
<td>Index</td>
<td>Col-1</td>
<td>Col-2</td>
<td>Col-3</td>
</thead>
<tr>
<td>1</td>
<td>Column00</td>
<td>Column01</td>
<td>Column02</td>
</tr>
<tr>
<td>2</td>
<td>Column10</td>
<td>Column11</td>
<td>Column12</td>
</tr>
<tr>
<td>3</td>
<td>Column20</td>
<td>Column21</td>
<td>Column22</td>
</tr>
<tr>
<td>4</td>
<td>Column30</td>
<td>Column31</td>
<td>Column2</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function () {
$("#odd").click(function () {
$("table tr:odd").css({
"background-color": "#00e673",
color: "white",
});
});
$("#even").click(function () {
$("table tr:even").css({
"background-color": "#b3b3cc",
color: "white",
});
});
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA