How to change the value when you click on a cell in the table

Question

There is a function that allows you to draw a table when entering an array and another function that allows you to set coordinates in the table and the value can be moved. And how can you make the value change when you click on any cell?

function createTable(tableData) { var table = document.createElement('table'); var tableBody = document.createElement('tbody'); if(document.querySelectorAll('._Table').length > 0){ for(var i = document.querySelectorAll('._Table').length - 1; i >= 0; i--){ document.querySelectorAll('._Table')[i].remove(); }; }; table.classList.add('_Table'); tableData.forEach(function(rowData, i) { var row = document.createElement('tr'); rowData.forEach(function(cellData, j) { var cell = document.createElement('td'); cell.id=i+'_'+j cell.appendChild(document.createTextNode(cellData)); row.appendChild(cell); }); tableBody.appendChild(row); }); table.appendChild(tableBody); document.body.appendChild(table); } document.querySelector(".btn").addEventListener("click", function() { var row = document.querySelector(".col1").value; var col = document.querySelector(".col2").value; var row_mas = []; var col_mas = []; for (var i = 0; i < row; i++) { var col_mas = []; for (var j = 0; j < col; j++) { col_mas.push(0); } row_mas.push(col_mas); } createTable(row_mas); }); document.querySelector(".btn2").addEventListener("click", function() { var row = document.querySelector(".col3").value; var col = document.querySelector(".col4").value; var gell = document.getElementById(row+"_"+col); gell.innerHTML="1" });

  body { margin-top: 10%; margin-left: 40%; } th,td { width: 50px; border: 1px solid red; font-size: x-large; color: white; } tbody { background-color: blue; } input { width: 20px; height: 20px; }

 <input type="text" class="col1"> <input type="text" class="col2"> <button class="btn">Go</button> <br/> <input type="text" class="col3"> <input type="text" class="col4"> <button class="btn2">koordinats</button>

Do you need to change the value of the cell when you click and that's it?
Yes, (for example, 2) to any other value and that the cell color also changes
And how to make it so that when you click on any cell, the value changes?
now there is a value of 0, and when pressed it became for example 2

Accepted Answer · 2017-02-10T06:52:20

To do this, you need to create a click function and call it every time you create a table.

 function createTable(tableData) { var table = document.createElement('table'); var tableBody = document.createElement('tbody'); if (document.querySelectorAll('._Table').length > 0) { for (var i = document.querySelectorAll('._Table').length - 1; i >= 0; i--) { document.querySelectorAll('._Table')[i].remove(); }; }; table.classList.add('_Table'); tableData.forEach(function(rowData, i) { var row = document.createElement('tr'); rowData.forEach(function(cellData, j) { var cell = document.createElement('td'); cell.id = i + '_' + j cell.appendChild(document.createTextNode(cellData)); row.appendChild(cell); }); tableBody.appendChild(row); }); table.appendChild(tableBody); document.body.appendChild(table); } // Наше нажатие function clickCell() { var cell = document.querySelectorAll('._Table td'); for(var i = 0; i < cell.length; i++){ cell[i].onclick = function() { this.innerHTML = 2; this.style.backgroundColor = 'green'; }; }; }; document.querySelector(".btn").addEventListener("click", function() { var row = document.querySelector(".col1").value; var col = document.querySelector(".col2").value; var row_mas = []; var col_mas = []; for (var i = 0; i < row; i++) { var col_mas = []; for (var j = 0; j < col; j++) { col_mas.push(0); } row_mas.push(col_mas); } createTable(row_mas); clickCell(); // Вызываем эту функцию }); document.querySelector(".btn2").addEventListener("click", function() { var row = document.querySelector(".col3").value; var col = document.querySelector(".col4").value; var gell = document.getElementById(row + "_" + col); gell.innerHTML = "1" });

 body { margin-top: 10%; margin-left: 40%; } th, td { width: 50px; border: 1px solid red; font-size: x-large; color: white; } tbody { background-color: blue; } input { width: 20px; height: 20px; }

 <input type="text" class="col1"> <input type="text" class="col2"> <button class="btn">Go</button> <br/> <input type="text" class="col3"> <input type="text" class="col4"> <button class="btn2">koordinats</button>

You need to use the function every time you create a table, because if you start it only once, it will not be applied to new cells.

It is necessary to limit td specific table, and not to take from the whole document.

How to change the value when you click on a cell in the table

1 answer 1

More articles: