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>

CertainPerformance · Accepted Answer · 2018-08-02 23:01:06Z

2

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)">

answered Aug 2, 2018 at 23:01

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3280899 Over a year ago

Thank you so much for the help and the explanation.

user3280899 Over a year ago

Hi, the table is created perfect dynamically. But when i use second time text box to create a table. the first one also appears. I need to keep the latest one to display. Not the previous ones. Do you have an idea? Or is it a new question to post? Please let me know. Thanks.

CertainPerformance Over a year ago

If you need to only have one table from toggleTable displayed at any point, have table be a persistent variable, not a variable scoped only to the inside of toggleTable. If table exists when toggleTable is run, remove it from the document (or clear its textContent if you want to re-use it)

user3280899 Over a year ago

Thank you for your time. I just finished it! Had two variables for textbox (old and newvalue). having one more onchange event for the textbox to see if the value is same or not. if the value is not same then elementbyid.mydiv.innerhtml = " "; it works perfect :-)

Collectives™ on Stack Overflow

Dynamic create table in javascript not showing column properly

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related