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

Question

在下面的代码片段中的表格中，我希望一旦点击一个项目，我想将所选单元格的名称更改为与数组中的序列对应的下一个名称。 [正方形，三角形，圆形，椭圆形，五边形]所以，如果我点击＆＃34; square＆＃34;，现在出现在它上面的名称应为＆＃34;三角形＆＃34;。

＆＃13;

＆＃13;

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);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

  

＆＃34;我希望值更改为序列中的下一个＆＃34; （从评论中澄清它不是元素在重要的权利，它是数组中的序列）

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

＆＃13;

＆＃13;

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);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我已使用array .findIndex() method查找数组中的项目，因此如果您想支持IE，则需要a polyfill，或者您当然可以使用{{1}循环或其他什么。

Answer 3

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

＆＃13;

＆＃13;

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);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;