JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<div id="control">
    line <input type="text" size="5" id="line" /> <button> go </button>
</div>
<table>
    <tr>
        <td></td>
        <td>asd</td>
    </tr>
</table>

CSS

table{margin-top:20px;}
td{padding:3px;}
td:nth-child(1){color:red;}
tr.active{background-color:yellow;}

#control{line-height:20px;padding:3px;position:fixed;top:0;left:0;right:0;background-color:#999955}

JavaScript

// create and fill the table
var row = $('tr');
var table = $('table');
for (var i=1;i<5;i++){
    row.clone().appendTo( table );
}
table.find('tr').each(function(idx, elem){
    alert(idx+"/"+elem);
    $(this).find('td:first').text(idx).end().find('td:last').text('This is the line '+(idx)+' of the table');
});

// code to scroll

$('#control button').click(function(){
    var w = $(window);
    var row = table.find('tr')
        .removeClass('active')
        .eq( +$('#line').val() )
        .addClass('active');
    
    if (row.length){
        $('html,body').animate({scrollTop: row.offset().top - (w.height()/2)}, 1000 );
    }
});