Set type text inside cell javascript

December 19, 2021

I want to type text inside the cell but I tried to set attribute with td but it doesn’t work. Please help me how can I set attribute to type text in the cell. Thank you for your help!

function addTable() {

    rn = window.prompt("Input number of rows", 1);
    cn = window.prompt("Input number of columns",1);

    var myTableDiv = document.getElementById("myDynamicTable");

    var table = document.createElement('TABLE');
    table.border = '1';
  
    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);
  
    for (var i = 0; i < parseInt(rn, 10); i++) {
      var tr = document.createElement('TR');
      tableBody.appendChild(tr);
  
      for (var j = 0; j < parseInt(cn, 10); j++) {
        var td = document.createElement('TD');
        td.width = '75';
        td.appendChild(document.createTextNode("text"));
        tr.appendChild(td);
      }
    }
    myTableDiv.appendChild(table);
  }
addTable();

>Solution :

You need to create an input element and then append that to td:

rn = window.prompt("Input number of rows", 1);
cn = window.prompt("Input number of columns", 1);

var myTableDiv = document.getElementById("myDynamicTable");

var table = document.createElement('TABLE');
table.border = '1';

var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);

for (var i = 0; i < parseInt(rn, 10); i++) {
  var tr = document.createElement('TR');
  tableBody.appendChild(tr);

  for (var j = 0; j < parseInt(cn, 10); j++) {
    var td = document.createElement('TD');
    td.width = '75';
    var input = document.createElement('input');
    input.setAttribute('type', 'text');
    input.setAttribute('value', 'text');
    td.appendChild(input);
    tr.appendChild(td);
  }
}
myTableDiv.appendChild(table);