Dada una tabla HTML, la tarea es acceder al elemento de la tabla desde el controlador y resaltar cualquier fila que queramos.
Enfoque: Usaremos una operación DOM básica en JavaScript para acceder al elemento de la fila de la tabla. Agregaremos la clase de resaltado a la fila en la que hacemos clic, si la clase de resaltado ya está presente, eliminaremos esta clase para que sea normal.
- Método getElementById(): Para seleccionar cualquier elemento en HTML desde su ID, seleccionaremos la tabla para realizar la operación anterior.
- Método addEventListener(): después de seleccionar esta tabla, agregaremos un detector de eventos para escuchar desde el evento de clic.
- ruta: cuando hacemos clic en cualquier punto de la ventana, Ruta describe la ruta completa a la que pertenece. Por ejemplo, si hacemos clic en un elemento td de una tabla, su Ruta será [td, tr, tbody, table, body, html, document, Window].
- Después de seleccionar la fila, buscaremos la clase resaltada en su classList, si la encontramos, simplemente elimine esta clase o agregue si no la contiene.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to Access tr element from
Table using JavaScript ?
</title>
<style type="text/css">
body {
text-align: center;
}
h1 {
color: green;
}
/* Basic CSS to design table */
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
/* CSS command for the row to highlight */
.highlight {
background-color: #b8b8b8;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
Access tr element from
Table using JavaScript
</h3>
<table id="table_to_highlight">
<tr>
<th>Name</th>
<th>Email</th>
<th>Position</th>
</tr>
<tr>
<td>Shivam Singhal</td>
<td>shivamsinghal@app.com</td>
<td>Full Stack Developer</td>
</tr>
<tr>
<td>Shashank Chugh</td>
<td>shshankchugh@app.com</td>
<td>Software Developer</td>
</tr>
<tr>
<td>Akash Kumar</td>
<td>akashkumar@app.com</td>
<td>ML Engineer</td>
</tr>
<tr>
<td>Shivam Jaiswal</td>
<td>shivamjaiswal@app.com</td>
<td>Ethical Hacker</td>
</tr>
</table>
<script type="text/javascript">
// JavaScript Code to Highlight any
// row in the given table.
document.getElementById('table_to_highlight')
.addEventListener('click', function (item) {
// To get tr tag
// In the row where we click
var row = item.path[1];
var row_value = "";
for (var j = 0; j < row.cells.length; j++) {
row_value += row.cells[j].innerHTML;
row_value += " | ";
}
alert(row_value);
// Toggle the highlight
if (row.classList.contains('highlight'))
row.classList.remove('highlight');
else
row.classList.add('highlight');
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por shivamsinghal1012 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA