选择表中的一行或多行，并为该元素提供背景的技术

Technique to select a row or multiple rows of a table, and give that element a background

本文关键字：元素 技术 背景 选择 一行      更新时间：2023-09-26

我正在制作一个游戏级编辑器，在那里我使用表格创建了一个网格。现在，首先我实现了点击和拖动功能，一次选择多个单元格。

现在我需要更改单元格的背景，这些单元格是通过单击表下的另一个元素或按钮来选择的。

此外，我需要从这个网格创建一个多维数组，以知道哪个单元格上有元素。有什么帮助吗？。https://jsfiddle.net/56e7h23L/1/

var row = 15;
var column = 30;
var table = document.createElement('table');
var mousedown = false;
var selected = false;
for(i = 1; i <= row; i++){
  var tr = document.createElement('tr');
  for(j = 1; j <=column; j++){
    var td = document.createElement('td');
    td.className = 'cell';
    td.addEventListener("mousedown", function(e) { 
      e.preventDefault(); 
    });
    td.onmousedown = (function(i, j){
      return function(){
        console.log(i);
        console.log(j);
        if(selected != true){
          this.className += ' active';
          mousedown = true;
        }else{
          this.className = 'cell';
        }
      }
    })(i, j);
    td.onmouseover = (function(i,j){
        return function(){
          if(mousedown){
            this.className += ' active';
          }  
        }
    })(i, j);

    document.onmouseup = function(){
      console.log('hello');
      mousedown = false;
    }
    tr.appendChild(td);
  }
  table.appendChild(tr);
}
document.body.appendChild(table);

您可以通过访问上一个和下一个（从当前）tr的td

td.onmousedown = function(){
   var currentIndexInParent = whichChild(this);
   var tdAtSameLevelAboveTr = this.parentElement.previousSibling.childNodes.item( currentIndexInParent );
   var tdAtSameLevelBelowTr = this.parentElement.nextSibling.childNodes.item( currentIndexInParent );
};
function whichChild(elem){
    var  i= 0;
    while((elem=elem.previousSibling)!=null) ++i;
    return i;
}
相关文章：