title: HTML Table Range Selection/Deselection in JavaScript
body: <p>I need the functionality of selecting and deselecting a table cell range. The attached code works perfectly but it uses JQuery while the rest of my project uses plain JavaScript. onmousedown, onmouseover, and onmouseup are the three mouse events used in this code.<br>
  I tried to convert this JQuery code to plain JavaScript but could not succeed. I would very much appreciate if you can help me in this regard.<br>
  Thank you!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var table = $("#table");    
  
  var isMouseDown = false;
  var startRowIndex = null;
  var startCellIndex = null;
  
  function selectTo(cell) {
      
      var row = cell.parent();    
      var cellIndex = cell.index();
      var rowIndex = row.index();
      
      var rowStart, rowEnd, cellStart, cellEnd;
      
      if (rowIndex &lt; startRowIndex) {
          rowStart = rowIndex;
          rowEnd = startRowIndex;
      } else {
          rowStart = startRowIndex;
          rowEnd = rowIndex;
      }
      
      if (cellIndex &lt; startCellIndex) {
          cellStart = cellIndex;
          cellEnd = startCellIndex;
      } else {
          cellStart = startCellIndex;
          cellEnd = cellIndex;
      }        
      
      for (var i = rowStart; i &lt;= rowEnd; i++) {
          var rowCells = table.find("tr").eq(i).find("td");
          for (var j = cellStart; j &lt;= cellEnd; j++) {
              rowCells.eq(j).addClass("selected");
          }        
      }
  }
  
  table.find("td").mousedown(function (e) {
      isMouseDown = true;
      var cell = $(this);
  
      table.find(".selected").removeClass("selected"); // deselect everything
      
      if (e.shiftKey) {
          selectTo(cell);                
      } else {
          cell.addClass("selected");
          startCellIndex = cell.index();
          startRowIndex = cell.parent().index();
      }
      
      return false; // prevent text selection
  })
  .mouseover(function () {
      if (!isMouseDown) return;
      table.find(".selected").removeClass("selected");
      selectTo($(this));
  })
  .bind("selectstart", function () {
      return false;
  });
  
  $(document).mouseup(function () {
      isMouseDown = false;
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table td {
      border: 1px solid #999;
      width: 40px;
      height: 15px;
      margin: 10px;
  }
  
  td.selected {
      background-color: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;body&gt;
  Click and drag mouse or use shift key to select cells.
  &lt;table id="table"&gt;
  
    &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    
  &lt;/table&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>