My table is quite large, with potentially more than 100 rows. To handle this, I've used the Scroll class to give it a fixed height. Within the table, there is a radio button.
The issue arises when the table is rendered and, for example, row No. 50 is selected by default. I want the table to automatically scroll to that position. Each row has its own class defined in the code, so I simply need to scroll to a particular class within the table.
Here is a snippet of the HTML:
<table class="table-scroll">
<tr class="radio1"><td>1</td></tr>
<tr class="radio2"><td>2</td></tr>
<tr class="radio3"><td>3</td></tr>
</table>
For the CSS:
.table-scroll{
max-height:500px;
overflow-x:hidden;
overflow-y:scroll;
margin-bottom:20px;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}
And for the JavaScript:
<script>
How can I scroll to a specific class such as radio3??
</script>