Add data and create temporary table which contains the newly created data dynamically

Add data and create temporary table which contains the newly created data dynamically

write the below code in view

@{

    ViewBag.Title = "Index";

}

<h2>Index</h2>

<div class="row">

    <div class="col-md-12">

        <div class="col-md-2">@Html.Label("Fname", "First name", new { style = "width:110px" })</div>

        <div class="col-md-2">@Html.Label("Lname", "Last name", new { style = "width:110px" })</div>

        <div class="col-md-2">

            @Html.Label("Gender", "Gender", new { style = "width:110px" })

        </div>

        <div class="col-md-2">

            @Html.Label("Status", "Status", new { style = "width:110px;margin-left: -15px;" })

        </div>

    </div>

</div>

<div id="mainDiv">

    <table id="dynTable" style="margin-left: 19px !important;"></table>

    <div class="row" id="child">

        <div class="col-md-12">

            <div class="col-md-2">@Html.TextBox("Fname", null, new { style = "width:110px" })</div>

            <div class="col-md-2">@Html.TextBox("Lname", null, new { style = "width:110px" })</div>

            <div class="col-md-2">

                @Html.DropDownList("Gender", new List<SelectListItem> { new SelectListItem() { Text = "Male", Value = "Male" }, new SelectListItem { Text = "feMale", Value = "FeMale" }, new SelectListItem { Text = "Select Gender", Value = "Select Gender" } }, "Select Gender")

            </div>

            <div class="col-md-2" style="margin-left: -15px;">

             

                @Html.CheckBox("Status", isChecked: false)

            </div>

            <div class="col-md-3">

                <button id="save" onclick="AddRow()">Add</button>

                <button id="update" onclick="updateRow()" style="display:none">Update</button>

            </div>

        </div>

    </div>

   

</div>

<div class="row">

    <button id="SaveData" onclick="save()" style="margin-top: 25px;margin-left: 29px;">

        SaveData

    </button>

</div>

<script>

    var id = 0;

    function addElement(parentId, elementTag, elementId, html) {

        // Adds an element to the document

        debugger;

        var p = document.getElementById(parentId);

        var exNode = document.getElementById("child");

        var newElement = document.createElement(elementTag);

        newElement.setAttribute('id', elementId);

        newElement.innerHTML = html;

        p.appendChild(newElement);

    }

    function AddRow() {

        id++;

        debugger;

        var elementId = "Child" + id;

        window.localStorage.setItem("id", id);

        var newElement = (

           "<td id='First" + id + "' style='width:184px'>" + $("#Fname").val() + "</td>" +

           "<td  id='Second" + id + "' style='width:184px'>" + $("#Lname").val() + "</td>" +

           "<td id='Gender" + id + "' style='width:184px'>" + $("#Gender").val() + "</td>" +

            "<td id='Status" + id + "' style='width:184px'>" + $("#Status").is(":checked") + "</td>" +

           "<td><button id='remove'  onclick='removeElement(Child" + id + ")'>Remove</button></td>" +

           "<td><button id='Edit'  onclick='editElement(Child" + id + ")'>Edit</button></td>");

        var elementTag = "tr";

        addElement("dynTable", elementTag, elementId, newElement)

        // $("#child").before(newElement);

        $("#Fname").val("")

        $("#Lname").val("")

        $("#Gender").val("Select Gender")

        $("#Status").prop("checked", false)

    }

    function removeElement(elementId) {

        // Removes an element from the document

        var element = document.getElementById(elementId.id);

        element.parentNode.removeChild(element);

    }

    function editElement(elementId) {

        debugger;

        window.localStorage.setItem("childElementId", elementId.id);

        var id = window.localStorage.getItem("id");

        var fn = document.getElementById("First" + id).innerText;

        var sc = document.getElementById("Second" + id).innerText;

        var gn = document.getElementById("Gender" + id).innerText;

        var stn = document.getElementById("Status" + id).innerText;

        $("#Fname").val(fn);

        $("#Lname").val(sc);

        $("#Gender").val(gn);

        $("#Status").val(stn);

        $("#save").hide();

        $("#update").show();

    }

    function updateRow() {

        debugger;

        var updatedRowId = window.localStorage.getItem("childElementId");

        var id = updatedRowId.substr(5);

        document.getElementById("First" + id).innerText = $("#Fname").val();

        document.getElementById("Second" + id).innerText = $("#Lname").val();

        document.getElementById("Gender" + id).innerText = $("#Gender").val();

        document.getElementById("Status" + id).innerText = $("#Status").val();

        $("#Fname").val("")

        $("#Lname").val("")

        $("#Gender").val("Select Gender")

        $("#Status").prop("checked", false)

        $("#save").show();

        $("#update").hide();

    }

    function save() {

        var id = window.localStorage.getItem("id");

        var fname = "", lname = "", gender = "", status = "";

        for (var i = 1; i <= id; i++) {

            fname = fname + "," + document.getElementById("First" + i).innerText;

            lname = lname + "," + document.getElementById("Second" + i).innerText;

            gender = gender + "," + document.getElementById("Gender" + i).innerText;

            status = status + "," + document.getElementById("Status" + i).innerText;

        }

        var model = {

            "FirstName": fname,

            "LastName": lname,

            "Gender": gender,

            "Status": status,

        }

        $.ajax(

            {

                url: "/Employee/Save",

                dataType: "json",

                data: model,

                success: function (result) {

                    alert(result);

                },

                error: function (err) {

                    alert(err);

                }

            })

    }

</script>