Wrote a function that draws a table and passed an array to it. With input, you can draw rows and columns. I also added two input and a button to set the coordinates (well, you know, like the game of sea battle). How to do it? For example, I enter the value "2", "3" (second column and 3 line) and the value "1" was displayed there.

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) { var row = document.createElement('tr'); rowData.forEach(function(cellData) { var cell = document.createElement('td'); 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); }); 
 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>

    3 answers 3

    First set the id for your table cells:

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

    then you can easily find them by id :

      var gell = document.getElementById(row+"_"+col); gell.innerHTML="1" 

     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>

    • Produces an error bro - Anton
    • @Anton If you set the coordinates correctly, it does not display. Tasks to make a coordinate check was not. - Crantisz

    There is an option to calculate the cell, directly, through the positions specified in the second fields by the index of elements:

     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) { var row = document.createElement('tr'); rowData.forEach(function(cellData) { var cell = document.createElement('td'); 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 stings = document.querySelector('.col3').value, rows = document.querySelector('.col4').value; document.querySelectorAll('._Table > tbody > tr')[stings - 1].querySelectorAll('td')[rows - 1].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>

      According to the documentation , the event can be processed as follows:

       object.addEventListener("change", function(e) { doThingsWith(e.target.value) } )

      Or put in a form and process submit .

      And to get the cell value by coordinates will help this property of html-tables:

       table.rows[rowIndex].cells[columnIndex]