Question

我正在构建一个表，我想要更改所选单元格的背景颜色。然后当我选择一个不同的单元格（并对这个新单元格应用相同的更改）时，我希望更改在第一个（不再选中）单元格中恢复。对此最好的方法是什么？这是我的代码：

var table = '';

for (var r = 0; r < rows; r++) {
    table += '<tr>';

    for (var c = 0; c < cols; c++) {
        if (c == 0) {
            if (r == 0) {
                var cellID = r.toString();
                cellID += letterArray[c - 1];
                table += '<td style="min-width:50px; height:25px;">' + '</td>';
            }
            else {
                var cellID = r.toString();
                cellID += letterArray[c - 1];
                table += '<td style="min-width:50px; height:25px">' + r + '</td>';
            }
        }
        else if (r == 0 && c > 0) {
            var cellID = r.toString();
            cellID += letterArray[c - 1];
            table += '<td style="min-width:50px; height:25px">' + letterArray[c - 1] + '</td>';
        }
        else {
            var cellID = r.toString();
            cellID += letterArray[c - 1];
            table += '<td id="' + cellID + '" style="min-width:50px; height:25px;" onclick="selectCell(this)">' + '</td>';
        }
    }
    table += '</tr>';
}

将表格写入文档：

document.write('<table id="table" border=1>' + table + '</table>');

selectCell功能：

function selectCell(x) {
    alert("Row = " + x.parentNode.rowIndex + " Col = " + String.fromCharCode((x.cellIndex - 1) + 65));
    x.style.backgroundColor = 'purple';
}

这是我遇到问题的地方。当我单击第一个单元格时，我的警报会向我显示我选择了哪个单元格的信息，然后更改背景颜色。然后当我选择不同的单元格时，它会通过新的单元格行和列信息提醒我，并更改颜色。

恢复先前所选单元格颜色变化的最佳方法是什么？

感谢您的时间和精力！

Answer 1

你应该创建一个应用背景颜色的CSS类，并在你的函数中添加/删除它。您的函数可以检查已经具有该类的元素，如下所示：

CSS：

.selected {
  background-color: purple;
}

JS：

function selectCell(x) {
  var currentSelection = document.querySelector('.selected');

  if (currentSelection) {
    currentSelection.classList.remove('selected');
  }

  x.classList.add('selected');
}

Answer 2

我同意@Rishat Muhametshin你应该避免使用document.write。我喜欢@ skyline3000如何解决它，所以我把所有内容放在一个片段中，让你看到一种更简洁的方法来编写代码。

我甚至在顶部和侧面给你真正的标题，然后添加了额外的CSS，使它们看起来更像标题。

var rows = 7;
var cols = 8;
var table = document.createElement('table');
var selecedTd;
table.id = "table";
table.border = 1;
table.cellSpacing = 0;
table.cellPadding = 4;
document.body.appendChild(table);

for (var r = 0; r < rows; r++) {
  var tr = document.createElement('tr');
  if (r > 0) {
    tr.id = "row"+r;
  }
  table.appendChild(tr);

  for (var c = 0; c < cols; c++) {
    var cell;
    var char = String.fromCharCode(c+64);

    if (c===0 || r===0) {
      cell = document.createElement('th');
      cell.setAttribute('style', 'min-width:50px; height:25px;');
    } else {
      cell = document.createElement('td');
    }
    tr.appendChild(cell);
    

    if (c == 0 && r > 0) {
      cell.textContent = r;
    }
    else if (r == 0) {
      if (c > 0) {
        cell.textContent = char
        cell.id = "col"+c;
      }
    }
    else {
      cell.id = r+char;
      cell.addEventListener('click', selectCell);
      //cell.textContent = cell.id;
    }
  }
}


function selectCell(event) {
  var x = event.target;
  var currentSelection = document.querySelector('.selected');

  if (currentSelection) {
    currentSelection.classList.remove('selected');
  }

  x.classList.add('selected');
}

.selected {
  background-color: purple;
  color: white;
}

th {
  background-color: #DDD;
}

td {
  cursor: pointer;
}

<强>更新

以下是允许编辑所选字段的代码。它需要工作才能在生产中使用，你可能希望将数据保存在某个数组或对象以及单元格中，但它应该让你去。

var rows = 7;
var cols = 8;
var table = document.createElement('table');
var selecedTd;
var inputField = document.createElement('input');
table.id = "table";
table.border = 1;
table.cellSpacing = 0;
table.cellPadding = 4;
document.body.appendChild(table);
inputField.className = "roving-input";

for (var r = 0; r < rows; r++) {
  var tr = document.createElement('tr');
  if (r > 0) {
    tr.id = "row"+r;
  }
  table.appendChild(tr);

  for (var c = 0; c < cols; c++) {
    var cell;
    var char = String.fromCharCode(c+64);

    if (c===0 || r===0) {
      cell = document.createElement('th');
    } else {
      cell = document.createElement('td');
    }
    tr.appendChild(cell);
    

    if (c == 0 && r > 0) {
      cell.textContent = r;
    }
    else if (r == 0) {
      if (c > 0) {
        cell.textContent = char
        cell.id = "col"+c;
      }
    }
    else {
      cell.id = r+char;
      cell.addEventListener('click', selectCell);
      cell.textContent = cell.id;
    }
  }
}


function selectCell(event) {
  var x = event.target;
  var currentSelection = document.querySelector('.selected');
  if (x !== currentSelection && x.localName === 'td') {
    if (currentSelection) {
      currentSelection.textContent = inputField.value;
      currentSelection.classList.remove('selected');
    }

    x.classList.add('selected');
    inputField.value = x.textContent;
    x.appendChild(inputField);
    inputField.style.width = (x.clientWidth-2)+'px';
    inputField.focus();
    inputField.select();
  }
}

.selected {
  position: relative;
}

th {
  background-color: #DDD;
  height:25px;
  min-width:50px;
}

td {
  cursor: pointer;
}

.roving-input {
  background-color: #FDF;
  border: none;
  bottom: 0;
  display: inline-block;
  left: 0;
  outline: none;
  position:absolute;
  right: 0;
  top: 0;
}

选择更改一段时间，并在选择其他更改后还原更改？

2 个答案: