When i click on a h1 a table should appear but does not work?

JavaScript
1

This is part of a JavaScript college work, When i click on the h1 I want a table to display but Iam having trouble displaying the tr.
The table is only displaying the td and not the tr.

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
  border: 1px solid black;
}
</style>
</head>
<body>


<h1 onclick="myFunction()">Table</h1>

<script>
function myFunction() {
  var x = document.createElement("TABLE");
  x.setAttribute("id", "myTable");
  document.body.appendChild(x);

  var y = document.createElement("TR");
  y.setAttribute("id", "myTr");
  document.getElementById("myTable").appendChild(y);

  var z = document.createElement("TD");
  var t = document.createTextNode("cell");
  z.appendChild(t);
  document.getElementById("myTr").appendChild(z);
}
</script>

</body>
</html>
2

Code works as expected for me.

a TR has no ‘display’ per-se, it’s a container element that holds TD’s.

3

Oh thanks was so confused.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.