Hago clic en el botón Change1 : la fila Prueba 1 cambia el fondo a rojo. Hago clic en el botón Change2 : la fila Prueba 2 cambia el fondo a rojo, pero la Prueba 1 permanece con un fondo rojo y no quiero eso. Cuando hace clic en el botón Cambiar, solo la fila asignada debe cambiar el color de fondo; el resto permanece azul. Cómo hacerlo ? Quiero una forma de código similar basada en getElementsByClassName i scrollIntoView
prueba esto
function myFunction(index) { var x = document.getElementsByClassName("testRow"); [...x].forEach(el => el.style.background = "blue") x[index].scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' }); x[index].style.background = "red"; } table { width: 100%; } tr, td { padding-bottom: 100px; } tr { background-color: blue; color: #fff; } <button onclick="myFunction(0)">Change1</button> <button onclick="myFunction(1)">Change2</button> <button onclick="myFunction(2)">Change3</button> <button onclick="myFunction(3)">Change4</button> <button onclick="myFunction(4)">Change5</button> <table> <tr class="testRow"> <td>Test1</td> </tr> <tr class="testRow"> <td>Test2</td> </tr> <tr class="testRow"> <td>Test3</td> </tr> <tr class="testRow"> <td>Test4</td> </tr> <tr class="testRow"> <td>Test5</td> </tr> </table>puede almacenar el último elemento modificado en una variable para volver a cambiarlo a rojo. también puedes usar clases para aplicar o quitar estilos
CSS
table { width: 100%; } tr, td { padding-bottom: 100px; } tr { background-color: blue; color: #fff; } .style{ background : red; }JS
if(store!= undefined){ store.classList.remove("style") } var x = document.getElementsByClassName("testRow"); store = x[num]; x[num].scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' }); x[num].classList.add("style") }