如何像日历一样通过拖动来选择html单元格和突出显示

<table>
  <tr>
    <td id="cell1">Cell 1</td>
    <td id="cell2">Cell 2</td>
    <td id="cell3">Cell 3</td>
  </tr>
  <tr>
    <td id="cell4">Cell 4</td>
    <td id="cell5">Cell 5</td>
    <td id="cell6">Cell 6</td>
  </tr>
</table>

.selected {
  background-color: yellow;
}

var isDragging = false;
var startCellId;

function handleMouseDown(event) {
  isDragging = true;
  startCellId = event.target.id;
}

function handleMouseMove(event) {
  if (isDragging) {
    var currentCellId = event.target.id;
    highlightCells(startCellId, currentCellId);
  }
}

function handleMouseUp() {
  isDragging = false;
}

function highlightCells(startCellId, currentCellId) {
  var cells = document.getElementsByTagName('td');
  for (var i = 0; i < cells.length; i++) {
    var cell = cells[i];
    if (cell.id >= startCellId && cell.id <= currentCellId) {
      cell.classList.add('selected');
    } else {
      cell.classList.remove('selected');
    }
  }
}

document.addEventListener('mousedown', handleMouseDown);
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);