I click Change1 button - Test 1 row turns the background red. I click Change2 button - Test 2 row changes the background to red, but Test 1 stays with a red background and I don't want that. When you click the Change button, only the row assigned to it should change the background color - the rest stays blue. How to do it ?
I want a similar form of code based on getElementsByClassName i scrollIntoView
try this
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>you can store the last changed element in an variable to change it back to red. also you can use classes to apply or remove styles
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")
}