如何用Javascript旁边的元素的值更改单元格的元素？

Question

In table like the one below in the code snippet I would like that once clicked an item, I want to change the name of the selected cell to the next name corresponding to the sequence like in the array. [square, triangle, circle, oval, pentagon] So if I click "square", now the name appearing on it should be "triangle".

 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

You can access cells by their cellIndex property. So once you have the cell that was clicked on, get the cell to the right (if it exists) and update the innerHTML of the clicked on cell.

 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> 

Here is a more concise version:

 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> 

Edit

Updated to loop through the names in succession

 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

"I want the value to change to the next in the sequence" (clarification from a comment that it isn't the element to the right that matters, it's the sequence in the array)

OK, so I would probably use a (delegated) click handler attached to the table element. Get the value of the clicked td element and look it up in the card array, then from there get the next item from the array. Maybe a little something like this:

 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> 

I have used the array .findIndex() method to find the item in the array, so if you want to support IE you'll need a polyfill , or of course you could just use a for loop or whatever.

Answer 3

Please feel free to optimize this solution. Hope this works for you and this is what you want :)

 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>