in java script As always, I recommend you go through the problems at the end of...

Question

Question

in java script As always, I recommend you go through the problems at the end of...

in java script

As always, I recommend you go through the problems at the end of the chapter in addition to the assignment to better review and understand the chapter contents. Please submit your solutions for the assignment in an HTML file this time (i.e. assignment7.html).

Problem

Re-create the course schedule table with JavaScript. Refer to the Build A Table (Links to an external site.)Links to an external site. exercise in the textbook in Chapter 13 if you need a starting point. You may use the following shell for your html file. Please refer to the Resources page in this module for testing your code.

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Defines a cleaner look for tables */
      table  { border-collapse: collapse; }
      td, th { border: 1px solid black; padding: 3px 8px; }
      th     { text-align: left; }
    </style>
  </head>
  <body>
    <script>
      function buildTable(data) {
        // Your code here.
      }

      document.body.appendChild(buildTable(CLASS_SCHEDULE));
    </script>
  </body>
</html>

Requirement(s):

You can only use DOM methods to create HTML table elements (<table>, <th>, <tr>, <td>) and are not allowed to create the table using HTML only.
You must use the following DOM methods:
- document.createElement()
- document.appendChild()

Recommendations (not required):

Get the structure of the table down, then worry about styling. Have fun with this assignment!
- Up to 5 BONUS points for creative styling using CSS in the <style> shell provided or the style property for DOM objects.
Build a data set of an array of objects to help organize the content that make up your table and use a loop to In the following table, similar to the textbook's exercise example, the properties represent contents of the table heading cells <th> {property} </th> and values represent the contents of table standard cells <td> {value} </td>, however, you can format your data in any way you wish.
```
      var CLASS_SCHEDULE = [
        {
          week: 1,
          begins: "03/04",
          topics: ["Introduction", "Chapter 1: Values Types Operators", "Assignment 1 due 11:59pm 03/10"]
        },
        {
          week: 2,
          begins: "03/11",
          topics: ["Chapter 2: Programming Structure", "Assignment 2 due 11:59pm 03/17"]
        },
        ...
      ];
```

In case you need a reminder of what a table structure looks like (for clarity, you cannot use the below to create your table for this assignment):

<table>                   //-> table DOM object
  <tr>                    //-> table row
    <th>name</th>         //-> table header cell
    <th>height</th>
    <th>country</th>
  </tr>
  <tr>
    <td>Kilimanjaro</td>  //-> table standard cell
    <td>5895</td>
    <td>Tanzania</td>
  </tr>
</table>

This would look end up looking something like:

name	height	country
Kilimanjaro	5895	Tanzania

engineering Computer-Science

Add a comment Improve this question Transcribed image text

Answer 1

Answer #1

Here is code:

<!DOCTYPE html>

<head>

<style>

/* Defines a cleaner look for tables */

table {

border-collapse: collapse;

}

td,

th {

border: 1px solid black;

padding: 3px 8px;

}

th {

text-align: left;

}

</style>

</head>

<body>

function buildTable(data) {

var myTable = document.createElement("table");

var thead = document.createElement("thead");

var trHead = document.createElement("tr");

var th1 = document.createElement("th");

th1.innerText = "week";

var th2 = document.createElement("th");

th2.innerText = "begins";

var th3 = document.createElement("th");

th3.innerText = "topics";

trHead.appendChild(th1);

trHead.appendChild(th2);

trHead.appendChild(th3);

thead.appendChild(trHead);

myTable.appendChild(thead);

var tbody = document.createElement("tbody");

for (var j = 0; j < data.length; j++) {

var row = data[j];

var tr = document.createElement('tr');

var TDWeek = document.createElement('td');

var TDBegins = document.createElement("td");

var TDTopic = document.createElement("td");

TDWeek.innerText = row.week;

TDBegins.innerText = row.begins;

for (let i = 0; i < row.topics.length; i++) {

var div = document.createElement("div");

div.innerText = row.topics[i];

TDTopic.appendChild(div);

}

tr.appendChild(TDWeek);

tr.appendChild(TDBegins);

tr.appendChild(TDTopic);

tbody.appendChild(tr);

}

myTable.appendChild(tbody);

return myTable;

}

var CLASS_SCHEDULE = [{

week: 1,

begins: "03/04",

topics: ["Introduction", "Chapter 1: Values Types Operators", "Assignment 1 due 11:59pm 03/10"]

},

{

week: 2,

begins: "03/11",

topics: ["Chapter 2: Programming Structure", "Assignment 2 due 11:59pm 03/17"]

}

];

document.body.appendChild(buildTable(CLASS_SCHEDULE));

</script>

</body>

</html>

Output:

Add a comment

Answer 2

in java script As always, I recommend you go through the problems at the end of...

Homework Answers

Add Answer to:
in java script As always, I recommend you go through the problems at the end of...

Post as a guest

Earn Coins

in java script As always, I recommend you go through the problems at the end of...

Homework Answers

Add Answer to: in java script As always, I recommend you go through the problems at the end of...

Post as a guest

Earn Coins

Add Answer to:
in java script As always, I recommend you go through the problems at the end of...