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

Posted 2023-03-05

【中文标题】如何在Javascript中使用其旁边元素的值更改单元格的元素？

【英文标题】：How to change the element of a cell with the value of the element next to it in Javascript?

【发布时间】：2017-07-17 14:13:51

【问题描述】：

在代码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>

【问题讨论】：

必须更改整个表格还是仅更改您单击的特定单元格？

"the next on the right" - 如果单击最后一列中的单元格会怎样？它的右侧没有单元格。您的意思是您希望该值更改为 card 数组中的下一个形状？

只有我点击的特定单元格应该改变。 @AHBagheri

@nnnnnn 我希望将值更改为序列中的下一个

【参考方案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>

【讨论】：

只适用于单击一次，也不适用于五边形，即最后一个条目

它适用于所有点击，但它会逐渐替换具有右侧名称的所有单元格。如果您想按顺序遍历名称，那就是另一个问题了。

【参考方案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>

【参考方案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 循环或其他什么。

【讨论】：

我最终得到了一个几乎相同的解决方案（一旦我理解了这个问题）。 ;-)