在表格中查找文本并平滑滚动到表格上的 position 并突出显示该行

Question

I have a simple table with some data and i want to scroll to a specific position based on date & highlight that row and based on the which day of Ramadan it is.

Let us say its 13 Ramadan which would be on 25-04-2021 then i have to scroll to that position and highlight the row in RED or any other color. So far i am finding text and changing the color and i am doing same for scroll but scroll is not working not sure where i am doing it wrong..

This page feature is specially required for mobile version so that user is scroll to the right position on page etc

https://codepen.io/KGuide/pen/jOyLWNR

 //$(window).scrollTop($("*:contains('05-05-2021'):last").offset().top); //$(window).scrollTop($("*:contains('25-04-2021')").offset().top); $(window).scrollTop($("*:contains('25-04-2021')")); $("tr:contains('25-04-2021')" ).css( "color", "red" );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="table-w "> <table class="ramadan-table"> <thead> <tr> <th scope="col">Date</th> <th scope="col">Day</th> <th scope="col">Ramadan</th> </tr> </thead> <tbody> <tr> <td class="Date" data-label="Date">13-04-2021</td> <td data-label="Day">Tuesday</td> <td data-label="Ramadan">1</td> </tr> <tr> <td class="Date" data-label="Date">14-04-2021</td> <td data-label="Day">Wednesday</td> <td data-label="Ramadan">2</td> </tr> <tr> <td class="Date" data-label="Date">15-04-2021</td> <td data-label="Day">Thursday</td> <td data-label="Ramadan">3</td> </tr> <tr> <td class="Date" data-label="Date">16-04-2021</td> <td data-label="Day">Friday</td> <td data-label="Ramadan">4</td> </tr> <tr> <td class="Date" data-label="Date">17-04-2021</td> <td data-label="Day">Saturday</td> <td data-label="Ramadan">5</td> </tr> <tr> <td class="Date" data-label="Date">18-04-2021</td> <td data-label="Day">Sunday</td> <td data-label="Ramadan">6</td> </tr> <tr> <td class="Date" data-label="Date">19-04-2021</td> <td data-label="Day">Monday</td> <td data-label="Ramadan">7</td> </tr> <tr> <td class="Date" data-label="Date">20-04-2021</td> <td data-label="Day">Tuesday</td> <td data-label="Ramadan">8</td> </tr> <tr> <td class="Date" data-label="Date">21-04-2021</td> <td data-label="Day">Wednesday</td> <td data-label="Ramadan">9</td> </tr> <tr> <td class="Date" data-label="Date">22-04-2021</td> <td data-label="Day">Thursday</td> <td data-label="Ramadan">10</td> </tr> <tr> <td class="Date" data-label="Date">23-04-2021</td> <td data-label="Day">Friday</td> <td data-label="Ramadan">11</td> </tr> <tr> <td class="Date" data-label="Date">24-04-2021</td> <td data-label="Day">Saturday</td> <td data-label="Ramadan">12</td> </tr> <tr> <td class="Date" data-label="Date">25-04-2021</td> <td data-label="Day">Sunday</td> <td data-label="Ramadan">13</td> </tr> <tr> <td class="Date" data-label="Date">26-04-2021</td> <td data-label="Day">Monday</td> <td data-label="Ramadan">14</td> </tr> <tr> <td class="Date" data-label="Date">27-04-2021</td> <td data-label="Day">Tuesday</td> <td data-label="Ramadan">15</td> </tr> <tr> <td class="Date" data-label="Date">28-04-2021</td> <td data-label="Day">Wednesday</td> <td data-label="Ramadan">16</td> </tr> <tr> <td class="Date" data-label="Date">29-04-2021</td> <td data-label="Day">Thursday</td> <td data-label="Ramadan">17</td> </tr> <tr> <td class="Date" data-label="Date">30-04-2021</td> <td data-label="Day">Friday</td> <td data-label="Ramadan">18</td> </tr> <tr> <td class="Date" data-label="Date">01-05-2021</td> <td data-label="Day">Saturday</td> <td data-label="Ramadan">19</td> </tr> <tr> <td class="Date" data-label="Date">02-05-2021</td> <td data-label="Day">Sunday</td> <td data-label="Ramadan">20</td> </tr> <tr> <td class="Date" data-label="Date">03-05-2021</td> <td data-label="Day">Monday</td> <td data-label="Ramadan">21</td> </tr> <tr> <td class="Date" data-label="Date">04-05-2021</td> <td data-label="Day">Tuesday</td> <td data-label="Ramadan">22</td> </tr> <tr> <td class="Date" data-label="Date">05-05-2021</td> <td data-label="Day">Wednesday</td> <td data-label="Ramadan">23</td> </tr> <tr> <td class="Date" data-label="Date">06-05-2021</td> <td data-label="Day">Thursday</td> <td data-label="Ramadan">24</td> </tr> <tr> <td class="Date" data-label="Date">07-05-2021</td> <td data-label="Day">Friday</td> <td data-label="Ramadan">25</td> </tr> <tr> <td class="Date" data-label="Date">08-05-2021</td> <td data-label="Day">Saturday</td> <td data-label="Ramadan">26</td> </tr> <tr> <td class="Date" data-label="Date">09-05-2021</td> <td data-label="Day">Sunday</td> <td data-label="Ramadan">27</td> </tr> <tr> <td class="Date" data-label="Date">10-05-2021</td> <td data-label="Day">Monday</td> <td data-label="Ramadan">28</td> </tr> <tr> <td class="Date" data-label="Date">11-05-2021</td> <td data-label="Day">Tuesday</td> <td data-label="Ramadan">29</td> </tr> <tr> <td class="Date" data-label="Date">12-05-2021</td> <td data-label="Day">Wednesday</td> <td data-label="Ramadan">30</td> </tr> </tbody> </table> </div>

Answer 1

Use $(window).scrollTop($("*:contains('25-04-2021')").parent('tr').offset().top);

Jquery scroll needs the offset of html tag.

Demo: https://jsfiddle.net/qtkwr7ny/