jQuery addClass example

Change class name on click in jQuery

HTML

Scroll -->
<div id="container">
  <table>
    <tr>
      <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
  </table>
</div>
<div id="position">
  Position: 0
</div>
<div id="repaint"></div>

CSS

div
{
  width: 200px;
  overflow-x: scroll;
}

table
{
  width: 400px;
}

td
{
  border: 1px solid black;
  height: 50px;
  width: 50px;
}

td:nth-child(even)
{
  background: grey;
}

JavaScript

table = $('#container')
position = $('#position')
repaint = $('#repaint')


updatePosition = () => {
	position.html('Position: ' + table.scrollLeft());
  
  // Synchronize canvas here:
  repaint.html(`repaintCanvas(${table.scrollLeft()})`);
}

table.scroll(updatePosition);