JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<body>


<!--HTML for main table on parent window-->
 <div id = "emptable">
<h1>:Record of Existing Employees:</h1>
  <table id="employees" border = "1">
    <thead>
      <tr>
        <th>Employee ID</th>
        <th>Employee Name</th>
        <th>Employee Designation</th>
        <th colspan = "2">Edit/Delete</th>
      </tr>
    </thead>
    <tbody>
      <tr id = "t1">
        <td>1</td>
        <td>Sandeep Nagpure</td>
        <td>Team Lead</td>
        <td><button id = "e1" class = "hidden">Edit</button>
        <td><button id = "d1" class = "hidden">Del</button>
      </tr>
    </tbody>
  </table>
<button id="add-employee">Add an Employee</button>
<button id="edit-del">Toggle Edit/Delete options</button>
</div>



<!--HTML for modal popup on pressing the Add an Employee button on parent window-->
<div id="add-form">
  <fieldset>
   <legend>Provide Employee details:</legend>
    <label for="empid">Employee ID</label>
      <input type="text" name="empid" id="empid" />
    <label for="empname">Employee Name</label>
      <input type="text" name="empname" id="empname" />
    <label for="empdesig">Employee Designation</label>
      <input type="text" name="empdesig" id="empdesig" />
  </fieldset>
</div>


<!--HTML for modal popup on pressing the Edit button next to the 1st row in the table--> 
<div id="edit-form">
  <fieldset>
   <legend>Edit Employee details:</legend>
    <label for="empidn">Employee ID</label>
      <input type="text" name="empidn" id="empidn" />
    <label for="empnamen">Employee Name</label>
      <input type="text" name="empnamen" id="empnamen" />
    <label for="empdesign">Employee Designation</label>
      <input type="text" name="empdesign" id="empdesign" />
  </fieldset>
</div>
 

</body>

CSS

h1 {color:blue;text-decoration:underline;}
    body { font-size: 100%; }
    label, input { display:block; }
    input.text { margin-bottom:12px; width:95%; padding: .4em; }
    h1 { color: orange; font-size: 1.2em; margin: .6em 0; }
    table, th, td {border:2px solid black; border-collapse:collapse; padding:10px; background-color:#C0C0C0;}
    th {background-color:green;color:white;}
    #emptable {width:500px;margin: 0 auto; text-align:center;}
    fieldset {background-color:#A5D871;color:#334125;border: 2px solid #781351;width: 20em;}
    .hidden {visibility:hidden;}
    .visi {visibility:visible;}

JavaScript

$(function () {
    var empid = $("#empid"),
        empname = $("#empname"),
        empdesig = $("#empdesig"),
        con = true,
        c=2;
       
       // JS for 1st row's Delete Button
       $("#d1")
            .button()
            .click(function () {
           $("#t1").remove();
        });
        
      
      //JS for 1st row's Edit Button
       $("#e1")
            .button()
            .click(function () {
            $("#edit-form").dialog("open");
            $("#emptable").hide();
            $("#edit-form").dialog({
            autoOpen: false, 
            height: 200,
            width: 250,
            modal: true,  
            open: function(event, ui)
                  {
                     $(".ui-dialog-titlebar").hide();
            
                   },
            position: { my: "center", at: "center", of: window },
            show: {
         			effect: "fadeIn",
        			duration: 200
      			   },
      		hide: {
        			effect: "fadeOut",
        			duration: 200
      				},
            buttons: {
                "Edit Employee Details": function () {
        
                        $("#t1").replaceWith("<tr id = t1>" +
                            "<td>" + empidn.val() + "</td>" +
                            "<td>" + empnamen.val() + "</td>" +
                            "<td>" + empdesign.val() + "</td>" +
                            "<td>" + "<button id = e1 class = hidden>Edit</button>" + "</td>" +
                            "<td>" + "<button id = d1 class = hidden>Del</button>" + "</td>" +
                            "</tr>");                                   
                        $(this).dialog("close");
                        $("#emptable").show();
                        		
                        },
                "Cancel": function() {
                $(this).dialog("close");
                $("#emptable").show();
                }
            }});
           
        }); 
        
        
     ...