Есть функция которая позволяет при вводе массива нарисовать таблицу и еще функция которая позволяет задавать координаты в таблице и значение можно двигать , А как сделать так чтобы при нажатии на любую ячейку значение поменялось ?
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>