Scribd Logo
Upload

Welcome to Scribd!

  • Week7 Deliv2 (ANASTACIO)

    Uploaded by

    Khate Whizlet Villareal Anastacio
    8 views3 pages
    This document contains HTML code for a registration form with input fields for first name, middle name, last name, email, and age. It includes two tables - one for the input form and one for displaying added rows of data. When the "Add" button is clicked, the JavaScript code takes the input values, adds them to arrays, inserts a new row into the display table, and populates the cells with the stored values from the arrays. This allows multiple entries to be added and displayed in a table.

    Original Description:

    Original Title

    Week7-Deliv2(ANASTACIO)

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains HTML code for a registration form with input fields for first name, middle name, last name, email, and age. It includes two tables - one for the input form and one for displaying added rows of data. When the "Add" button is clicked, the JavaScript code takes the input values, adds them to arrays, inserts a new row into the display table, and populates the cells with the stored values from the arrays. This allows multiple entries to be added and displayed in a table.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    8 views3 pages

    Week7 Deliv2 (ANASTACIO)

    Uploaded by

    Khate Whizlet Villareal Anastacio
    This document contains HTML code for a registration form with input fields for first name, middle name, last name, email, and age. It includes two tables - one for the input form and one for displaying added rows of data. When the "Add" button is clicked, the JavaScript code takes the input values, adds them to arrays, inserts a new row into the display table, and populates the cells with the stored values from the arrays. This allows multiple entries to be added and displayed in a table.

    Copyright:

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

    KHATE WHIZLET V.

    ANASTACIO

    <!DOCTYPE html>
    <html>
    <head>
        <title>Forms&Table</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

            <table border="4" align="left">


                <thead>
                    <th colspan="2"><fonts size="10">Registration</fonts></th>
                    <tr>
                        <th>First Name</th>
                        <td><input type="text" name="fname" id="fname"></td>
                    </tr>
                </thead>
                <thead>
                    <tr>
                        <th>Middle Name</th>
                        <td><input type="text" name="mname" id="mname"></td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>Last Name</th>
                        <td><input type="text" name="lname" id="lname"></td>
                    </tr>
                    <tr>
                        <th>Email</th>
                        <td><input type="text" name="email" id="email"></td>
                    </tr>
                    <tr>
                        <th>Age</th>
                        <td><input type="text" name="age" id="age"></td>
                    </tr>
                    <tr id="btna">
                        <td colspan="2"><input type="button" name="button" id="btn"
    value="Add" onclick="AddRow()"></td>
                    </tr>
                </tbody>
            </table>
            <table border="4" id="show" align="right">
                <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Middle Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                        <th>Age</th>

                    </tr>
                </thead>
            </table>
       
       
        <script>
           
            var list1 = [];
            var list2 = [];
            var list3 = [];
            var list4 = [];
            var list5 = [];

            var n = 1;
            var x = 0;

            function AddRow(){

                var AddRown = document.getElementById('show');


                var NewRow = AddRown.insertRow(n);

                list1[x] = document.getElementById("fname").value;
                list2[x] = document.getElementById("mname").value;
                list3[x] = document.getElementById("lname").value;
                list4[x] = document.getElementById("email").value;
                list5[x] = document.getElementById("age").value;

                var cel1 = NewRow.insertCell(0);


                var cel2 = NewRow.insertCell(1);
                var cel3 = NewRow.insertCell(2);
                var cel4 = NewRow.insertCell(3);
                var cel5 = NewRow.insertCell(4);

                cel1.innerHTML = list1[x];
                cel2.innerHTML = list2[x];
                cel3.innerHTML = list3[x];
                cel4.innerHTML = list4[x];
                cel5.innerHTML = list5[x];

                n++;
                x++;
            }

        </script>
    </body>
    </html>

    You might also like