My_Project/Directory_Page.html at main · PRIYA0444/My_Project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Corporate Directory </title>

    <style>
        table{
            border-collapse:collapse;
            border-color:3px solid black;
            display:none;
        }
        tr,td{
            border-color:3px solid black;
            background-color:rgb(196, 225, 231);
            border-collapse:collapse;

}
th{
     border-color:3px solid black;
    background-color: rgb(32, 103, 114);
    border-collapse:collapse;

}
.a
{

    background-color:  rgb(34, 91, 105); /* Light blue background */
    border: 2px solid #204f65; /* Blue border */
    padding: 16px;
    border-radius: 8px;
    width: fit-content;
    margin: 40px auto;
}
.b
{
background-color:  rgb(34, 91, 105);
border: 2px solid #3790a9;
border-radius:8px;
width:fit-content;
  margin: 40px auto;

}
body{
    background-color: rgb(115, 196, 214);
    text-align: center;

}

</style></head>
    <body>
        <h1 style="background-color: #0a4c68;color:aliceblue " >Corporate Directoy</h1><br><br>
        <div class="a">
        <label>Name</label>
        <input type="text" id="name" placeholder="Enter your name">
        <br><br>
        <label>Employee Id</label>
        <input type="text" id="Empid" placeholder="Enter Employee Id" required>
        <br><br>
        <label>Designation</label>
        <input type="text" id="desn" placeholder="Enter Designation" required>
        <br><br>
        <label>ContactNo</label>
        <input type="text" id="phone" placeholder="Enter Employee's phone number" required>
        <br><br>
        <button onclick="AddNew()">Submit</button><br><br>
        </div>
        <br><br>
        <div class="b">
        <table id="StudentTable">
                                  <thead>
                                       <tr>
                                        <th>Name</th>
                                        <th>EmployeeId</th>
                                        <th>Designation</th>
                                        <th>ContactNo.</th>

                                       </tr>
                                 </thead>
<tbody>
    <!--insertion js script-->
</tbody>

</table></div>
        <script>
            function AddNew()
            {
                let name = document.getElementById("name").value;
                let Empid = document.getElementById("Empid").value;
                let desn = document.getElementById("desn").value;
                let phone = document.getElementById("phone").value;
if (!name.trim() || !Empid.trim() || !desn.trim() || !phone.trim()) {
  alert("Please enter name ,employee id ,designation and email.");
  return;
}
                let table = document.getElementById("StudentTable");
                table.style.display="table";
                let tablebody = document.getElementsByTagName("tbody")[0];

                let newRow=tablebody.insertRow();
                let newCell1=newRow.insertCell(0);
                let newCell2=newRow.insertCell(1);
                 let newCell3=newRow.insertCell(2);
                let newCell4=newRow.insertCell(3)
                newCell1.innerHTML = name;
                newCell2.innerHTML =  Empid;
                newCell3.innerHTML = desn;
                newCell4.innerHTML =  phone;

                document.getElementById("name").value= "";
                document.getElementById("phone").value= "";
                document.getElementById("Empid").value= "";
                document.getElementById("desn").value= "";
            }

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