CODEWITHSUNDEEP
javascriptweb
8this
8this

Reputation: 495

Adding elements to the DOM tree, Help creating a table in Javascript

I am a beginner working on an assignment for a class. The assignment is asking us to create a blank html file with html, meta, title, and body tags. It then instructs us to populate this html file using a javascript code with the following details:

A 4x4 table with a header row counting as one of the 4 rows.
4 buttons labeled up/down/left/right. A fifth button labeled 'Mark Cell'. ... I will spare you the rest of the details. It is this first part I am having trouble with as I have already created the other portions.

I wrote the following code to address the first portion. 

var table = document.createElement('table');
var header = document.createThead();
var frstRow = document.createElement('tr');
var databits = document.createElement('td');
frstRow.appendChild(databits);
header.appendChild(frstRow);
table.appendChild(header);
----------------------Everything Below this line works by itself...but it is missing a header

    for (var i = 1; i < 4; i++){
    var tr = document.createElement('tr');   


    var td1 = document.createElement('td');
    var td2 = document.createElement('td');
    var td3 = document.createElement('td');
    var td4 = document.createElement('td');
    table.style.border="1px solid black";
    td1.style.border="1px solid black";
    td2.style.border="1px solid black";
    td3.style.border="1px solid black";
    td4.style.border="1px solid black";

    var text1 = document.createTextNode(i);
    var text2 = document.createTextNode(i);
    var text3 = document.createTextNode(i);
    var text4 = document.createTextNode(i);

    td1.appendChild(text1);
    td2.appendChild(text2);
    td3.appendChild(text3);
    td4.appendChild(text4);
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    tr.appendChild(td4);


    table.appendChild(tr);
}

document.body.appendChild(table);

If I do everything underneath the line I drew, it works. It shows up as a 3rx4c table. I want to add a Th to the top of this table so I thought that I could add the code to the top for a table header and the corresponding row and td for that header. I am apparently wrong as when I do this, nothing displays!

What am I doing wrong?

Upvotes: 1

Views: 828

Answers (1)

deamentiaemundi
deamentiaemundi

Reputation: 5525

The following is not the most elegant and definitely not the fastest way to do it but I think it shows the necessary steps quite neatly.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Put a title here. No really, do it!</title>
<script type="text/javascript">
function makeTable(){
  var table = document.createElement('table');
  var header = document.createElement('th');
  var frstRow = document.createElement('tr');
  var databits = document.createElement('td');
  var text;

  table.style.border = "1px solid black";
  header.style.border = "1px solid green";
  databits.style.border = "1px solid red";
  // build the header row
  for(var i = 0;i < 4; i++){
    frstRow.appendChild(header.cloneNode());
    // fill the individual header cells
    frstRow.lastChild.textContent = "header " + (i+1);
  }
  // add it to the table
  table.appendChild(frstRow);
  // reset frstRow
  frstRow = document.createElement('tr');
  // make a normal row
  for(var i = 0;i < 4; i++){
    frstRow.appendChild(databits.cloneNode());
    // fill the individual normal cells
    frstRow.lastChild.textContent = "column " + (i+1);
  }
  for(var i = 0;i < 3; i++){
    // take the text content of the first cell in this row
    text = frstRow.firstChild.textContent;
    // append one row (cloneNode(true) copies everything in it, too)
    table.appendChild(frstRow.cloneNode(true));
    // set the first cell of the last row to be an indicator for the row#
    table.lastChild.firstChild.textContent = "Row " + (i+2) + " " + text;
  }
  // put the table in the body
  document.body.appendChild(table);
}
</script>
</head>
<body onload="makeTable()">

</body>
</html>

Upvotes: 1

Related Questions