JSFiddle - React, Tailwind, and code Playground

HTML

<table cellpadding="0" cellspacing="0" id="myTable">
  <tr>
    <td>0</td>
    <td>0</td>
    <td>0</td>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>2</td>
    <td>2</td>
  </tr>
</table>
<button onclick="addRow()">Add Row</button>

CSS

table td {
  width: 100px;
  height: 50px;
  text-align: center;
  vertical-align: middle;
  background-color: #ccc;
  border: 1px solid #fff;
}

table tr.highlighted td {
  background-color: #999;
}

body {
  user-select: none;
}

JavaScript

$(function() {
  var isMouseDown = false,
    isHighlighted;
  //$('#our_table').on('mousedown', 'tr', function (event) {
  $(document).mousedown(function(event){
  	if(event.target.nodeName === 'TD'){
    	isMouseDown = true;
    	$(event.target.parentElement).toggleClass("highlighted");
    }
    if(event.target.nodeName === 'TR'){
    	isMouseDown = true;
    	$(event.target).toggleClass("highlighted");
    }
  });
  $("#myTable tr").mouseover(function() {
    if (isMouseDown) {
      $(this).toggleClass("highlighted", isHighlighted);
    }
  }).bind("selectstart", function() {
    return false;
  })
  $(document).mouseup(function() {
    isMouseDown = false;
  });
});

function addRow() {
  var arrTables = document.getElementById('myTable');
  var oRows = arrTables.rows;
  var numRows = oRows.length;

  var newRow = document.getElementById('myTable').insertRow(numRows);
  var cell1 = newRow.insertCell(0);
  var cell2 = newRow.insertCell(1);
  var cell3 = newRow.insertCell(2);

  cell1.innerHTML = numRows;
  cell2.innerHTML = numRows;
  cell3.innerHTML = numRows;
}