如何实现点击选中表格图片并复制到另一表格单元格？

我正在开发一个生成两个表格的程序：

• 第一个表格包含16张图片，作为可点击选择的菜单选项；
• 第二个表格通过输入行数和列数生成，默认空白，每个单元格需要替换为从第一个表格选中的图片。

我已经完成表格生成等基础功能，但不清楚如何实现图片的选中与设置（推测和id及onclick()相关）。现有代码如下：

原始代码 #

JavaScript #

stolpci = window.prompt("vpiši stevilo stolpcov:");
for (i2 = 0; i2 < 1;) {
  if (stolpci < 11 || stolpci > 41) {
    stolpci = window.prompt("Napačno število. Število mora biti večje od 10 in manjše od 40. Ponovno vpiši stevilo stolpcov:");
  } else {
    i2++;
  }
}

vrstice = window.prompt("vpiši stevilo vrstic:");
for (i2 = 0; i2 < 1;) {
  if (vrstice < 6 || vrstice > 11) {
    vrstice = window.prompt("Napačno število. Število mora biti večje od 5 in manjše od 11. Ponovno vpiši stevilo vrstic:");
  } else {
    i2++;
  }
}

function generateTable() {
  const tbl = document.createElement("table");
  const tblBody = document.createElement("tbody");


  for (let i = 0; i < vrstice; i++) {
    const row = document.createElement("tr");
    row.id = i;
    for (let j = 0; j < stolpci; j++) {
      const cell = document.createElement("td");
      const cellText = document.createTextNode(' ');
      cell.appendChild(cellText);
      row.appendChild(cell);
      cell.id = j;
    }
    tblBody.appendChild(row);
  }
  tbl.appendChild(tblBody);
  document.body.appendChild(tbl);
}

function options() {
  const tbl = document.createElement("table");
  const tblBody = document.createElement("tbody");

  let nImage = 1;

  for (let i = 0; i < 1; i++) {
    const row = document.createElement("tr");

    for (let j = 0; j < 16; j++) {
      const cell = document.createElement("td");
      const cellText = document.createTextNode("");

      if (nImage > 16) {
        nImage = 1;
      }
      cell.style.backgroundImage = "url('images/sprite" + nImage + ".gif')";
      cell.id = nImage;
      nImage++;

      cell.appendChild(cellText);
      row.appendChild(cell);
    }
    tblBody.appendChild(row);
  }
  tbl.appendChild(tblBody);
  document.body.appendChild(tbl);
}

window.onload = () => {
  options();
  generateTable();
}

CSS #

table {
  border: 1px solid gray;
  padding: 0px;
  margin: 0px;
  border-spacing: 0px;
}

td {
  margin: 0px;
  padding: 0px;
  min-width: 32px;
  max-width: 32px;
  max-height: 32px;
  min-height: 32px;
  width: 32px;
  height: 32px;
  border: 1px solid gray;
  background-color: silver;
}

要完成选中图片并设置到第二个表格单元格的功能，按以下步骤修改代码：

1. 新增全局变量记录选中状态 #

添加一个全局变量存储当前选中的图片ID，作为两个表格之间的状态桥梁：

let selectedImageId = null;

2. 给图片单元格添加选中事件 #

在options()函数中，为每个图片单元格绑定点击事件，记录选中ID并添加视觉标记：

// 在options函数中设置完cell.id后添加
cell.onclick = function() {
  // 清除之前的选中样式
  document.querySelectorAll('.selected').forEach(el => el.classList.remove('selected'));
  // 记录当前选中的图片ID
  selectedImageId = this.id;
  // 添加选中样式
  this.classList.add('selected');
}

同时在CSS中补充选中样式：

.selected {
  border: 2px solid blue;
  box-sizing: border-box;
}

3. 给空白单元格添加设置图片事件 #

修改generateTable()函数，为每个空白单元格绑定点击事件，点击时将选中的图片设置为单元格背景：

// 在generateTable函数中创建cell后添加
cell.onclick = function() {
  if (selectedImageId) {
    this.style.backgroundImage = `url('images/sprite${selectedImageId}.gif')`;
    this.textContent = '';
  }
}

4. 修复ID重复问题 #

原代码中第二个表格的单元格ID会重复（同一列ID相同），不符合HTML规范，改为唯一ID：

// 在generateTable函数中替换cell.id = j
cell.id = `cell-${i}-${j}`;

完整修改后的代码 #

JavaScript #

let selectedImageId = null;

let stolpci = window.prompt("请输入列数:");
for (let i2 = 0; i2 < 1;) {
  if (stolpci < 11 || stolpci > 41) {
    stolpci = window.prompt("输入错误。列数必须大于10且小于40，请重新输入列数:");
  } else {
    i2++;
  }
}

let vrstice = window.prompt("请输入行数:");
for (let i2 = 0; i2 < 1;) {
  if (vrstice < 6 || vrstice > 11) {
    vrstice = window.prompt("输入错误。行数必须大于5且小于11，请重新输入行数:");
  } else {
    i2++;
  }
}

function generateTable() {
  const tbl = document.createElement("table");
  const tblBody = document.createElement("tbody");

  for (let i = 0; i < vrstice; i++) {
    const row = document.createElement("tr");
    row.id = `row-${i}`;
    for (let j = 0; j < stolpci; j++) {
      const cell = document.createElement("td");
      const cellText = document.createTextNode(' ');
      cell.appendChild(cellText);
      row.appendChild(cell);
      // 设置唯一ID
      cell.id = `cell-${i}-${j}`;
      // 绑定设置图片事件
      cell.onclick = function() {
        if (selectedImageId) {
          this.style.backgroundImage = `url('images/sprite${selectedImageId}.gif')`;
          this.textContent = '';
        }
      }
    }
    tblBody.appendChild(row);
  }
  tbl.appendChild(tblBody);
  document.body.appendChild(tbl);
}

function options() {
  const tbl = document.createElement("table");
  const tblBody = document.createElement("tbody");

  let nImage = 1;

  for (let i = 0; i < 1; i++) {
    const row = document.createElement("tr");

    for (let j = 0; j < 16; j++) {
      const cell = document.createElement("td");
      const cellText = document.createTextNode("");

      if (nImage > 16) {
        nImage = 1;
      }
      cell.style.backgroundImage = `url('images/sprite${nImage}.gif')`;
      cell.id = nImage;
      nImage++;

      // 绑定选中事件
      cell.onclick = function() {
        document.querySelectorAll('.selected').forEach(el => el.classList.remove('selected'));
        selectedImageId = this.id;
        this.classList.add('selected');
      }

      cell.appendChild(cellText);
      row.appendChild(cell);
    }
    tblBody.appendChild(row);
  }
  tbl.appendChild(tblBody);
  document.body.appendChild(tbl);
}

window.onload = () => {
  options();
  generateTable();
}

CSS #

table {
  border: 1px solid gray;
  padding: 0px;
  margin: 0px 0px 20px 0px;
  border-spacing: 0px;
}

td {
  margin: 0px;
  padding: 0px;
  min-width: 32px;
  max-width: 32px;
  max-height: 32px;
  min-height: 32px;
  width: 32px;
  height: 32px;
  border: 1px solid gray;
  background-color: silver;
  cursor: pointer;
}

.selected {
  border: 2px solid blue;
  box-sizing: border-box;
}

内容的提问来源于stack exchange，提问作者Jolobor