JSFiddle - React, Tailwind, and code Playground

by Shree Khanal

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>TABLE ENABLE DISABLE SELECTION</title>
    <script  type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="Scripts/script.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    <link type="text/css" rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"/>
    <link type="text/css" rel="stylesheet" href="https:/resources/demos/style.css"/>
    <link  type="text/css" href="Style/style.css" rel="stylesheet" />
     <link type="text/css" rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"/>
      <link type="text/css" rel="stylesheet" href="https:/resources/demos/style.css"/>
      <script  type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
      <script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

</head>
<body>

     <table id="myTable">
      <tr>
        <th>TH 1&nbsp</th>
        <th>TH 2&nbsp</th>
        <th>TH 3&nbsp</th>
        
      </tr>
      <tr >
        <td>R1&nbsp</td>
        <td>R1&nbsp</td>
        <td>R1&nbsp</td>
        
      </tr>
      <tr>
        <td>R2&nbsp</td>
        <td>R2&nbsp</td>
        <td>R2&nbsp</td>
      </tr>

      <tr>
        <td>R3&nbsp</td>
        <td>R3&nbsp</td>
        <td>R3&nbsp</td>
      </tr>
      </table>

       <fieldset>
        <legend><b>Input Fields</b></legend>
         <table id="caseDetails">
           <tr>
            <td>Department Case #</td>
            <td><input type="text" id="input1" name="input1#" disabled="disabled"/ value=""/></td>
          ...

CSS

#myTable
{
  border-collapse: collapse;
  width: 50%;
  border: 1px solid #ddd;
  padding: 2px;
}
#myTable th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
}
#myTable td, th {
  border: 1px solid #ddd;
  padding: 8px;
}
#myTable tr:nth-child(even){
  background-color: #D8D8D8;
}

#myTable tr.highlighted td {
    background-color: #5c715e;
}

#caseDetailsContainer{
  border-style: solid;
}
fieldset{
  border: 1px solid #04AA6D;
  border-width:thin;
  width: 50%;
  
}
.enabledisable{
pointer-events: none;
}

JavaScript

$(document).ready(function() {

  function populateInputFields() {
    var currentRow = $("#myTable tr.highlighted");
    var input1 = $("#input1").val(currentRow.find("td:eq(0)").text());
    var input2 = $("#input2").val(currentRow.find("td:eq(1)").text());
    var input3 = $("#input3").val(currentRow.find("td:eq(2)").text());
  }

  function isRowHighlighted() {
    if (!$('input').val()) {
      alert("Please click a row.");
    } else {
      editEnableDisable();
      input1;
      input2;
      input3;
    }
  }

  function editEnableDisable() {
    $("#input1").prop('disabled', false);
    $("#input2").prop('disabled', false);
    $("#input3").prop('disabled', false);
    $("#edit").prop('disabled', true);
    $("#save").prop('disabled', false);
    $("#cancel").prop('disabled', false);
  }

  function saveCancelEnableDisable() {
    $("#input1").prop('disabled', true);
    $("#input2").prop('disabled', true);
    $("#input3").prop('disabled', true);
    $("#edit").prop('disabled', false);
    $("#save").prop('disabled', true);
    $("#cancel").prop('disabled', true);
  }

  function successDialogBox() {
    $("p").text("Case has been updated");
    $("#dialogBox").dialog();
  }

  function updateGridData() {
    enableTableSelection();
    var currentRow = $("#myTable tr.highlighted");
    currentRow.find("td:eq(0)").text($("#input1").val());
    currentRow.find("td:eq(1)").text($("#input2").val());
    currentRow.find("td:eq(2)").text($("#input3").val());

  }

  function revertChanges() {
    var currentRow = $("#myTable tr.highlighted");
    var previous1 = currentRow.find("td:eq(0)").text()
    var previous2 = currentRow.find("td:eq(1)").text()
    var previous3 = currentRow.find("td:eq(2)").text()


    $("#input1").val(previous1);
    $("#input2").val(previous2);
    $("#input3").val(previous3);

  }
  ///ENABLE OR DISABLE CLICK ON TABLE ROWS
  function disableTableSelection() {
    $("#recentCasesTable tr").addClass('enabledisable');

  }

 ...