Tablerow Javascriptでの新しい列の追加

Question

私は、与えられた表のx座標とy座標をユーザーに尋ねます。選択されたセルは入力で満たされます。ここでは、指定されたx/y座標が指定されたテーブルを超えている場合、新しい行と列を作成する機能を追加したいと考えています。私は行の機能を挿入するように管理しましたが、この行にどのように列を追加できますか？

<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

あなたが同じ位置に、それぞれの行にセルを追加する必要があります。

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/