Dynamic create table in javascript not showing column properly

Question

I'm creating a dynamic table using a text box onchange function. It shows all rows and columns, but the columns aren't being displayed properly. How can I fix it?

 function toggleTable(val) { var root = document.getElementById("mydiv"); var table = document.createElement('table'); table.className = "mytable"; var tblB = document.createElement('tbody'); table.appendChild(tblB); var rowcnt = val; headerList = ["One", "Two", "Three"]; var tr = document.createElement('tr'); // Header row for (var j = 0; j < 3; j++) { var th = document.createElement('th'); //column var text = document.createTextNode(headerList[j]); //cell th.appendChild(text); tr.appendChild(th); } tblB.appendChild(tr); for (var i = 0; i < rowcnt; i++) { var tr = document.createElement('tr'); tblB.appendChild(tr); var td = document.createElement('td'); //tr.appendChild(td); for (var j = 0; j < 3; j++) { var element = document.createElement("input"); element.type = "text"; element.name = "sch" + i; if (i >= 0 && j == 0) { element.value = "Sch" + i; } tr.appendChild(element); } } root.appendChild(table); } < /script>

 <style>.mytable { width: 200px; border-width: 1px; padding: 8px; border-style: solid; border-color: #517994; background-color: lightblue; } .mytable td { border: 1px solid #000000; } </style>

 <!doctype html> <html> <head> <title>hellotest table </title> </head> <body> <center> <h1>table test </h1> </center> <div id="mydiv"></div> <input type="text" name="sch" value="0" onChange="toggleTable(this.value)"> </body> </html>

Answer 1

Append the input to a td and then append the td to the tr . At the moment, you're appending the input directly to the tr , which doesn't work.

(This is one reason why precise variable names are useful - a variable named element is less understandable than a variable named input , for example)

  var input = document.createElement("input");
  input.type = "text";
  input.name = "sch" + i;
  const td = document.createElement('td');
  td.appendChild(input);
  if (i >= 0 && j == 0) {
    input.value = "Sch" + i;
  }
  tr.appendChild(td);

 function toggleTable(val) { var root = document.getElementById("mydiv"); var table = document.createElement('table'); table.className = "mytable"; var tblB = document.createElement('tbody'); table.appendChild(tblB); var rowcnt = val; headerList = ["One", "Two", "Three"]; var tr = document.createElement('tr'); // Header row for (var j = 0; j < 3; j++) { var th = document.createElement('th'); //column var text = document.createTextNode(headerList[j]); //cell th.appendChild(text); tr.appendChild(th); } tblB.appendChild(tr); for (var i = 0; i < rowcnt; i++) { var tr = document.createElement('tr'); tblB.appendChild(tr); var td = document.createElement('td'); //tr.appendChild(td); for (var j = 0; j < 3; j++) { var input = document.createElement("input"); input.type = "text"; input.name = "sch" + i; const td = document.createElement('td'); td.appendChild(input); if (i >= 0 && j == 0) { input.value = "Sch" + i; } tr.appendChild(td); } } root.appendChild(table); }

 .mytable { width: 200px; border-width: 1px; padding: 8px; border-style: solid; border-color: #517994; background-color: lightblue; } .mytable td { border: 1px solid #000000; }

 <center> <h1>table test </h1> </center> <div id="mydiv"></div> <input type="text" name="sch" value="0" onChange="toggleTable(this.value)">

Dynamic create table in javascript not showing column properly

Question

1 answers

solution1
2 ACCPTED 2018-08-02 23:01:06

Dynamic create table in javascript not showing column properly

Question

1 answers

solution1 2 ACCPTED 2018-08-02 23:01:06

solution1
2 ACCPTED 2018-08-02 23:01:06