HTMLWORK/script.js at main · SAKTHIKUMAR1234/HTMLWORK · 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
let update_val = 0;

var main_arr = new Array();
function add() {
    document.getElementById("cls-add").style.display = "block";
    document.getElementById("name").value = "";
    document.getElementById("desg").value = "";
    document.getElementById("sal").value = "";
    document.getElementById("city").value = "";
}

function ex() {
    document.getElementById("cls-add").style.display = "none";
}


function ex1() {
    document.getElementById("cls-edit").style.display = "none";
}


function create() {
    let name = document.getElementById("name").value;
    let des = document.getElementById("desg").value;
    let sal = document.getElementById("sal").value;
    let city = document.getElementById("city").value;
    var arr = new Array(name, des, sal, city);
    main_arr.push(arr);
    document.getElementById("cls-add").style.display = "none";
    ref();
    console.log(main_arr);
}


function ref() {
    let ele = document.getElementById("temp-cls");
    ele.innerHTML = "";
    ele.innerHTML = `
    <div class="display-cls" id="display-cls">
<div class="cls-clm" id="cls-main">
    <div><a>S.No</a></div>
    <div><a>Name</a></div>
    <div><a>Designation</a></div>
    <div><a>Salary</a></div>
    <div><a>City</a></div>
    <div><a>Actions</a></div>
</div>

</div>
    `;
    let i = 1;
    main_arr.forEach(e => {
        ele.innerHTML += `
        <div class="cls-clm" id="temp">
            <div><a>${i}</a></div>
            <div><a>${e[0]}</a></div>
            <div><a>${e[1]}</a></div>
            <div><a>${e[2]}</a></div>
            <div><a>${e[3]}</a></div>
            <div class="header-btn"><a id="btne${i}" onclick="edit(${i})">Edit</a><a id="btnd${i}" onclick="del(${i})">Delete</a></div>
        </div>
    `;
        i++;
    });
    //alert("All data are cleared");
}

function edit(i) {
    update_val = --i;
    let ta = main_arr[i];

    document.getElementById("e-name").value = ta[0];
    document.getElementById("e-desg").value = ta[1];
    document.getElementById("e-sal").value = ta[2];
    document.getElementById("e-city").value = ta[3];
    document.getElementById("cls-edit").style.display = "block";
}

function update() {
    i = update_val;

    let name = document.getElementById("e-name").value;
    let des = document.getElementById("e-desg").value;
    let sal = document.getElementById("e-sal").value;
    let city = document.getElementById("e-city").value;
    var arr = new Array(name, des, sal, city);
    main_arr[i] = arr;
    document.getElementById("cls-edit").style.display = "none";
    ref();

}

function del(i) {
    main_arr.splice(--i, 1);
    ref();
}