HTML Table 范围 Selection/Deselection JavaScript

Question

我需要选择和取消选择 table 单元格范围的功能。附加代码工作完美，但它使用 JQuery，而我项目的其余部分使用普通 JavaScript。 onmousedown、onmouseover 和 onmouseup 是此代码中使用的三个鼠标事件。
我试图将此 JQuery 代码转换为纯 JavaScript 但未能成功。如果您能在这方面帮助我，我将不胜感激。
谢谢！

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 < startRowIndex) {
        rowStart = rowIndex;
        rowEnd = startRowIndex;
    } else {
        rowStart = startRowIndex;
        rowEnd = rowIndex;
    }
    
    if (cellIndex < startCellIndex) {
        cellStart = cellIndex;
        cellEnd = startCellIndex;
    } else {
        cellStart = startCellIndex;
        cellEnd = cellIndex;
    }        
    
    for (var i = rowStart; i <= rowEnd; i++) {
        var rowCells = table.find("tr").eq(i).find("td");
        for (var j = cellStart; j <= 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;
});

table td {
    border: 1px solid #999;
    width: 40px;
    height: 15px;
    margin: 10px;
}

td.selected {
    background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
Click and drag mouse or use shift key to select cells.
<table id="table">

  <tr>
    <td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td>
  </tr>
  
</table>

</body>

Answer 1

根据用途使用 querySelectorAll 并使用索引或使用 foreach。

window.onload = function() {

  var table = document.getElementById('table');
  var isMouseDown = false;
  var startRowIndex = null;
  var startColumnIndex = null;

  table.querySelectorAll('tr').forEach(function(tr, rowIndex) {
    tr.querySelectorAll('td').forEach(
      function(td, columnIndex) {
        td.addEventListener('mousedown', function() {
          isMouseDown = true;
          startRowIndex = rowIndex;
          startColumnIndex = columnIndex;
          table.querySelectorAll('td').forEach(function(td) {
            td.removeAttribute('class')
          })
          setSelectedInRange(startRowIndex, startColumnIndex, rowIndex, columnIndex)
        })
        td.addEventListener('mouseover', function() {
          if(!isMouseDown) return;
          setSelectedInRange(startRowIndex, startColumnIndex, rowIndex, columnIndex)
        })
      }
    )
  })

  document.addEventListener('mouseup', function() {
    isMouseDown = false;
  })
}

function setSelectedInRange(rowStart, columnStart, rowEnd, columnEnd) {
  var table = document.getElementById('table');
  table.querySelectorAll('td').forEach(function(td) {
    td.removeAttribute('class')
  })
  if(rowStart > rowEnd) {
    var temp = rowStart;
    rowStart = rowEnd;
    rowEnd = temp;
  }
  if(columnStart > columnEnd) {
    var temp = columnStart;
    columnStart = columnEnd;
    columnEnd = temp;
  }
  var rows = table.querySelectorAll('tr');
  for(var i = rowStart; i <= rowEnd; i++) {
    var currentRow = rows[i];
    var columns = currentRow.querySelectorAll('td');
    for(var j = columnStart; j <= columnEnd; j++) {
      columns[j].setAttribute('class', 'selected')
    }
  }
}

HTML Table 范围 Selection/Deselection JavaScript

HTML Table Range Selection/Deselection in JavaScript

javascript

jquery

html-table