Scribd Logo
Upload

Welcome to Scribd!

  • 2 views

    Here is the rew

    Uploaded by

    dzedziphilly

    Copyright:

    © All Rights Reserved
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Here is the rew

    Uploaded by

    dzedziphilly
    2 views9 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as doc, pdf, or txt
    2 views9 pages

    Here is the rew

    Uploaded by

    dzedziphilly

    Copyright:

    © All Rights Reserved
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as doc, pdf, or txt
    of 9

    Here is the rewritten JavaScript code with comments:

    ```

    // Get the table container element

    let tableContainer = document.getElementById("table-container");

    // Create a new table element

    let table = document.createElement("table");

    // Create a new table head element

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

    // Create a new table body element

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

    // Append the table head and body to the table

    table.appendChild(thead);

    table.appendChild(tbody);

    // Create a new table row element for the header

    let row = document.createElement("tr");

    // Create new table header cells and add them to the row

    let heading1 = document.createElement("th");

    heading1.innerHTML = "Column 1";

    row.appendChild(heading1);
    let heading2 = document.createElement("th");

    heading2.innerHTML = "Column 2";

    row.appendChild(heading2);

    let heading3 = document.createElement("th");

    heading3.innerHTML = "Column 3";

    row.appendChild(heading3);

    // Append the header row to the table head

    thead.appendChild(row);

    // Loop to create 5 table rows

    for (let i = 0; i < 5; i++) {

    // Create a new table row element

    let row = document.createElement("tr");

    // Create new table cells and add them to the row

    let cell1 = document.createElement("td");

    cell1.innerHTML = "Cell 1, Row " + (i + 1);

    row.appendChild(cell1);

    let cell2 = document.createElement("td");

    cell2.innerHTML = "Cell 2, Row " + (i + 1);

    row.appendChild(cell2);
    let cell3 = document.createElement("td");

    cell3.innerHTML = "Cell 3, Row " + (i + 1);

    row.appendChild(cell3);

    // Append the row to the table body

    tbody.appendChild(row);

    // Append the table to the table container

    tableContainer.appendChild(table);

    ```

    I added comments to explain each section of the code, making it easier to understand what the code is
    doing. Let me know if you have any further questions!

    Here is a simple JavaScript program that creates a table using HTML and CSS:

    HTML:

    ```

    <!DOCTYPE html>

    <html>

    <head>

    <title>Table Example</title>

    <style>
    table {

    border-collapse: collapse;

    width: 100%;

    th, td {

    border: 1px solid #ddd;

    padding: 10px;

    text-align: left;

    th {

    background-color: #f0f0f0;

    </style>

    </head>

    <body>

    <div id="table-container"></div>

    <script src="script.js"></script>

    </body>

    </html>

    ```

    JavaScript (in script.js file):

    ```
    let tableContainer = document.getElementById("table-container");

    let table = document.createElement("table");

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

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

    table.appendChild(thead);

    table.appendChild(tbody);

    let row = document.createElement("tr");

    let heading1 = document.createElement("th");

    let heading2 = document.createElement("th");

    let heading3 = document.createElement("th");

    heading1.innerHTML = "Column 1";

    heading2.innerHTML = "Column 2";

    heading3.innerHTML = "Column 3";

    row.appendChild(heading1);

    row.appendChild(heading2);

    row.appendChild(heading3);

    thead.appendChild(row);
    for (let i = 0; i < 5; i++) {

    let row = document.createElement("tr");

    let cell1 = document.createElement("td");

    let cell2 = document.createElement("td");

    let cell3 = document.createElement("td");

    cell1.innerHTML = "Cell 1, Row " + (i + 1);

    cell2.innerHTML = "Cell 2, Row " + (i + 1);

    cell3.innerHTML = "Cell 3, Row " + (i + 1);

    row.appendChild(cell1);

    row.appendChild(cell2);

    row.appendChild(cell3);

    tbody.appendChild(row);

    tableContainer.appendChild(table);

    ```

    This program creates a simple table with three columns and five rows, using HTML elements and CSS
    styling. The JavaScript code dynamically creates the table and its content, and appends it to the page.

    Note: You need to have both the HTML file and the JavaScript file (script.js) in the same directory for this
    to work.

    Sure, here's a simple JavaScript program that creates a table using HTML and CSS. The program creates a
    table with 3 rows and 3 columns, and then applies some basic styling using CSS.
    ```javascript

    // Create a table element

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

    // Create rows and cells and add them to the table

    for (var i = 0; i < 3; i++) {

    var row = table.insertRow();

    for (var j = 0; j < 3; j++) {

    var cell = row.insertCell();

    cell.textContent = 'Row ' + (i + 1) + ', Column ' + (j + 1);

    // Append the table to the body of the document

    document.body.appendChild(table);

    ```

    Here's the accompanying HTML and CSS for styling the table:

    HTML:

    ```html

    <!DOCTYPE html>

    <html lang="en">

    <head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Table Creation</title>

    <link rel="stylesheet" href="styles.css">

    </head>

    <body>

    <script src="script.js"></script>

    </body>

    </html>

    ```

    CSS (styles.css):

    ```css

    table {

    border-collapse: collapse;

    width: 100%;

    td {

    border: 1px solid #dddddd;

    text-align: center;

    padding: 8px;

    tr:nth-child(even) {
    background-color: #f2f2f2;

    th {

    background-color: #4CAF50;

    color: white;

    ```

    This JavaScript program creates a table dynamically using the DOM, and the accompanying HTML and
    CSS provide the structure and styling for the table.

    You might also like