如何在Javascript中使用其旁边元素的值更改单元格的元素？

Question

在代码sn-p下面的表格中，我希望一旦单击一个项目，我想将所选单元格的名称更改为与数组中的序列相对应的下一个名称。 [正方形、三角形、圆形、椭圆形、五边形]所以如果我点击“正方形”，现在出现在上面的名称应该是“三角形”。

var card = [
  {name:'square'},
  {name:'triangle'},
  {name:'circle'},
  {name:'oval'},
  {name:'pentagon'}
];

function generateTable(grid, rows, cols) {
  var row;
  var cells = rows * cols;
  for(var i=0; i < cells; i++){
    // track row length and insert new ones when necessary
    // also creates the first row
    if(i % cols == 0) {
      row = grid.insertRow(-1);
    }
    // track our position in the card list
    // modulo operator lets us loop through the cards repeatedly
    var thisCard = card[i % card.length];
    cell = row.insertCell(-1);
    cell.innerHTML = thisCard.name;
    cell.style.backgroundColor = '#D3D3D3';
  }
}

generateTable(document.getElementById('grid'), 7, 7);

<table id="grid">
</table>

Answer 1

您可以通过它们的 cellIndex 属性访问单元格。因此，一旦您拥有被点击的单元格，请将单元格移到右侧（如果存在）并更新被点击单元格的 innerHTML。

function changeName(e){
  // Get the element that was clicked on
  var cell = e.target;
  var row, index;
  // If it's a td, update the innerHTML
  if (cell && cell.tagName.toLowerCase() == 'td') {
    // Get the row that the cell is in
    row = cell.parentNode;
    // Get index of cell to right
    index = cell.cellIndex + 1;
    // Make sure cell to right exists
    if (row.cells[index]) {
      // Update clicked on cell
      cell.innerHTML = row.cells[index].innerHTML;
    }
  }
}

window.onload = function(){
  document.querySelector('table').addEventListener('click',changeName);
}

td {
  width: 5em;
  border: 1px solid #999999;
}

<table>
  <tr><td>square<td>triangle<td>circle<td>oval<td>pentagon
</table>

这是一个更简洁的版本：

window.onload = function() {
  document.querySelector('table').addEventListener('click',
    function(e) {
      var cell = e.target;
      var next = cell.cellIndex === undefined? null : cell.parentNode.cells[cell.cellIndex + 1];
      if (next)
        cell.innerHTML = next.innerHTML
    });
};

td {
  width: 5em;
  border: 1px solid #999999;
}

<table>
  <tr><td>square<td>triangle<td>circle<td>oval<td>pentagon
</table>

编辑

更新为连续遍历名称

var card = [
  {name:'square'},
  {name:'triangle'},
  {name:'circle'},
  {name:'oval'},
  {name:'pentagon'}
];

function getNextCard(name) {
}

window.onload = function() {
  document.querySelector('table').addEventListener('click',
    function(e) {
      var node = e.target;
      var name = node.textContent;
      var index;
      if (node.tagName.toLowerCase() == 'td') {
        index = (card.findIndex(function(obj){
          return obj.name == name;
        }) + 1) % card.length;
        node.textContent = card[index].name; 
      }
    });
};

td {
  width: 5em;
  border: 1px solid #999999;
}

<table>
  <tr><td>square<td>triangle<td>circle<td>oval<td>pentagon
</table>

Answer 2

请随时优化此解决方案。希望这对你有用，这就是你想要的:)

var card = [{
    name: 'square'
  },
  {
    name: 'triangle'
  },
  {
    name: 'circle'
  },
  {
    name: 'oval'
  },
  {
    name: 'pentagon'
  }
];

function onCellClick(td) {
  value = td.innerHTML.trim();
  for (var i = 0; i < card.length; i++) {
    var index;
    if (card[i].name === value) {
      index = i + 1;
      if (card.length - 1 === i) {
        index = 0
      }
      td.innerHTML = card[index].name;
      break;
    }
  }
}

function generateTable(grid, rows, cols) {
  var row;
  var cells = rows * cols;
  for (var i = 0; i < cells; i++) {
    // track row length and insert new ones when necessary
    // also creates the first row
    if (i % cols == 0) {
      row = grid.insertRow(-1);
    }
    // track our position in the card list
    // modulo operator lets us loop through the cards repeatedly
    var thisCard = card[i % card.length];
    cell = row.insertCell(-1);
    cell.innerHTML = thisCard.name;
    cell.onclick = function() {
      onCellClick(this);
    };
    cell.style.backgroundColor = '#D3D3D3';
  }
}

generateTable(document.getElementById('grid'), 7, 7);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="grid">
</table>

Answer 3

“我希望将值更改为序列中的下一个”（从评论中澄清，重要的不是右边的元素，而是数组中的序列）

好的，所以我可能会使用附加到表格元素的（委托）点击处理程序。获取单击的 td 元素的值并在 card 数组中查找它，然后从那里获取数组中的下一项。也许有点像这样：

document.getElementById('grid').addEventListener("click", function(e) {
  if (e.target.nodeName.toLowerCase() === "td") {
    var currentIndex = card.findIndex(function(shape) {
      return shape.name === e.target.innerHTML;
    });
    e.target.innerHTML = card[(currentIndex + 1) % card.length].name;
  }
});

var card = [
  {name:'square'},
  {name:'triangle'},
  {name:'circle'},
  {name:'oval'},
  {name:'pentagon'}
];

function generateTable(grid, rows, cols) {
  var row;
  var cells = rows * cols;
  for(var i=0; i < cells; i++){
    // track row length and insert new ones when necessary
    // also creates the first row
    if(i % cols == 0) {
      row = grid.insertRow(-1);
    }
    // track our position in the card list
    // modulo operator lets us loop through the cards repeatedly
    var thisCard = card[i % card.length];
    cell = row.insertCell(-1);
    cell.innerHTML = thisCard.name;
    cell.style.backgroundColor = '#D3D3D3';
  }
}

generateTable(document.getElementById('grid'), 7, 7);

<table id="grid">
</table>

我使用array .findIndex() method 来查找数组中的项目，所以如果你想支持IE，你需要a polyfill，或者当然你可以使用for 循环或其他什么。