Tengo una tabla de datos con un cuadro desplegable que ordena la tabla por columna. Estoy tratando de resaltar la columna que está seleccionada/ordenada por el menú desplegable. Estoy usando el siguiente código para obtener el índice del elemento desplegable:
<script> var sel = document.getElementById('asorting').selectedIndex; alert(sel); </script>Estoy usando el siguiente código CSS para resaltar la columna:
<style> table td:nth-of-type(3) { background-color:#E0E0E0; } </style>Ambos funcionan por sí solos, pero estoy tratando de actualizar la "tabla td: nth-of-type (3)" para cambiar según el valor de mi variable sel. He intentado usar (" + sel + ") para alimentar la variable al CSS, pero eso no funciona.
No tengo mucha experiencia en JS y no he podido encontrar nada en este sitio que se relacione exactamente con lo que estoy intentando.
Cualquier ayuda sería muy apreciada.
Puede alternar clases en javascript al llegar a una lógica como esta
<html> <head> <script> function changeStyle(v){ elements = document.getElementsByClassName('hightlight'); if(elements.length > 0){ for (let element of elements){ element.classList.remove('hightlight'); } } document.getElementById('data').children[parseInt(v)-1].className = "hightlight"; } </script> </head> <body> <style> .hightlight { color : red } </style> <select id="asorting" onchange="changeStyle(this.value)"> <option class="row" value="1">one</option> <option class="row" value="2">two</option> <option class="row"value="3">three</option> </select> <table> <tbody id="data"> <tr> <td>one</td> </tr> <tr> <td>two</td> </tr> <tr> <td>three</td> </tr> </tbody> </table> </body> </html>