Donate. I desperately need donations to survive due to my health

Get paid by answering surveys Click here

Click here to donate

Remote/Work from Home jobs

JavaScript Table value doesn't show up

on 
<!DOCTYPE html>
<html>

<head>
    <title>Employee Form</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>

<body>

    <div class="container">
        <img src="emp.png">
            <tr>
                <form onsubmit="addEmp(); return false;">
                    <div class="form-input">
                        <input type="text" id="firstname" placeholder="First Name" value="">
                    </div>
                    <div>
                        <input type="text" id="lastname" placeholder="Last Name" value="">
                    </div>
                    <div>
                        <input type="text" id="email" placeholder="Email" value="">
                    </div>
                    <div>
                        <input type="text" id="position" placeholder="Position" value="">
                    </div>
                    <div  class="form-action-buttons">
                        <input type="submit" value="Submit" class="btnSubmit">
                    </div>
                </form>
    </div><br/><br/><br/>
            <td>
                <table class="list" id="employeeList">
                    <thead>
                        <tr>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Email</th>
                            <th>Position</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </td>
            </tr>
    <script src="script.js"></script>
</body>

</html>

----------script.js--------------- "use strict" var arr = new Array(); //Array Created function addEmp() { getEmp(); arr.push({ firstname: document.getElementById("firstname").value, lastname: document.getElementById("lastname").value, email: document.getElementById("email").value, position: document.getElementById("position").value });

    localStorage.setItem("Employees", JSON.stringify(arr)); //adding some data to localstorage
    showEmp();
}
function getEmp() { //converting strings to array
    var str = localStorage.getItem("Employees"); 
    if(str != null)
        arr = JSON.parse(str);
}
function deleteEmp() { //Deleting row and localstorage
    if (confirm('Are you sure to delete this record ?')) {
        row = td.parentElement.parentElement;
        document.getElementById("employeeList").deleteRow(row.rowIndex);
        localStorage.removeItem();
    }
}
function editEmp() { //edit table value and localstorage value

}
function showEmp(arr) { //inputing localstorage value to the table
    getEmp();

    var tbl = document.getElementById("employeeList").getElementsByTagName('tbody')[0];
    for(i = 0; i < arr.length; i++) {
        var newRow = tbl.insertRow();
        var cell1 = newRow.insertCell();
        var cell2 = newRow.insertCell();
        var cell3 = newRow.insertCell();
        var cell4 = newRow.insertCell();
        var cell5 = newRow.insertCell();

        cell1.innerHTML = arr[i].firstname;
        cell2.innerHTML = arr[i].lastname;
        cell3.innerHTML = arr[i].email;
        cell4.innerHTML = arr[i].postition;
        cell5.innerHTML = `<a onClick="editEmp(this)">Edit</a>
                           <a onClick="deleteEmp(this)">Delete</a>`;
    }
}

Comments

Post a Comment