JSFiddle - React, Tailwind, and code Playground

by koh_edwin

HTML

<div id="control">
  line <input type="text" size="5" id="line" /> <button> go </button>
</div>
<table>
  <tr>
    <td></td>
    <td></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 = document.querySelector('tr');
var table = document.querySelector('table');
for (var i = 1; i < 100; i++) {
  var clone = row.cloneNode(true);
  var tds = clone.children;
  //tds[0].textContent = i;
  tds[1].textContent = 'This is the line ' + (i) + ' of the table';
  table.appendChild(clone);
}


// code to scroll

document.querySelector('#control button')
  .addEventListener('click', function() {
    var line = +document.querySelector('#line').value;
    var rows = table.querySelectorAll('tr');

    rows.forEach(row => row.classList.remove('active'))
    rows[line].classList.add('active');
    rows[line].scrollIntoView({
    	behavior: 'smooth',
      block: 'center'
    });
  });