Hinzufügen neuer Spalten in Tablerow Javascript

Question

Ich möchte einen Benutzer die X- und Y-Koordinate einer bestimmten Tabelle fragen. Die ausgewählte Zelle wird dann mit Eingabe gefüllt. Jetzt möchte ich ein Feature hinzufügen, das eine neue Zeile und Spalten am unteren Rand erstellt, wenn die angegebene x/y-Koordinate die angegebene Tabelle überschreitet. Ich habe es geschafft, das Einfügen eine Zeilenfunktion zu machen, aber wie kann ich die Spalten zu dieser Zeile hinzufügen?

<script> 
     window.addEventListener("load", function() { 

let button = document.getElementById("mybutton"); 
button.addEventListener("click", function() { 
    let xObj = document.getElementById("field_x"); 
    let yObj = document.getElementById("field_y"); 
    let textObj = document.getElementById("text"); 

    let x = xObj.value; 
    let y = yObj.value; 
    let text = textObj.value; 
    let fillxy = String(x+y); 
    console.log(y); 
    var table = document.getElementById("gametable"); 
    var xcounter = x; 
    var ycounter = y; 
    for (let i = 4; i < xcounter; i += 1) { 
     let row = document.createElement('tr'); 
     let newrow = gametable.appendChild(row); 
     for (let j = 0; j < y; j+= 1) { 
      let cell = document.createElement('td'); 

     } 

    } 

    let tabletofill = document.getElementById(fillxy); 
    tabletofill.innerText = [text]; 

    tabletofill.addEventListener("click", function(){ 
     if(tabletofill.innerText != "") { 
      tabletofill.innerText = ""; 
     } 
    }) 

}); 

});

Answer 1

Sie eine Zelle in jeder Reihe, in der gleichen Position hinzufügen:

JS:

function addColumn(colIndex) { 

    var table = document.getElementById("table"); 
    var rows = table.rows; 

    for (var i = 0; i < rows.length; i++) { 

     var cellsNumber = rows[i].cells.length; 
     if (colIndex <= cellsNumber) { 
      rows[i].insertCell(colIndex); 
     } 
     else { 
      console.log('Error : index out of range'); 
      break; 
     } 
    } 
} 

https://jsfiddle.net/tsgmgyc1/2/