JSFiddle - React, Tailwind, and code Playground

by sendil J

HTML

<table>
  <tr>
    <th>Parameter</th>
    <th>Scope</th>
    <th>Description</th>
    <th>Value</th>
    <th>Action</th>
  </tr>
  <tr>
    <td>Momentum_Home</td>
    <td>System</td>
    <td>Location on server for customer project artifacts</td>
    <td>/user/momentum/MOMENTUM_HOME</td>
    <td><a id="2" href="#">Override</a></td>
  </tr>
  <tr>
    <td>Template_Location</td>
    <td>System</td>
    <td>Location on server for customer project artifacts</td>
    <td>/user/momentum/TEMPLATE_LOCATION</td>
    <td><a href="#">Override</a></td>
  </tr>
  <tr>
    <td>SMPT_HOST</td>
    <td rowspan="3">System</td>
    <td>Location of SMTP outgoing mail server</td>
    <td>mail.momentum.ciber.com</td>
    <td rowspan="3"><a href="#">Override</a></td>
  </tr>
  <tr>
    <td>SMPT_ACCOUNT</td>
    
    <td>SMTP account name</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>SMPT_PASSWORD</td>
   
    <td>SMTP account password</td>
    <td>#@WOEEOIU222</td>
  </tr>
</table>

CSS

td,
th {
  border: 1px solid #000;
  padding: 5px;
}

JavaScript

var actualVal = [];

$('td a').click(function() {
  //alert($(this).parent().attr('rowspan'));
  alert($(this).attr('id'));
  var ScopeVal = $(this).closest('tr').find('td:nth-child(2)');
  var Values = $(this).closest('tr').find('td:nth-child(4)');

  var SMTPobj = ($(this).parent().attr('rowspan') != undefined);
  var currIndex = $(this).closest('tr').index();
	  
  if ($(this).text() == "Override") {
    if (SMTPobj) {
      var repeat = $(this).parent().attr('rowspan');
      
       actualVal[(currIndex)] = {
          scope: $('tr:nth-child(' + (currIndex+1) + ')').find('td:nth-child(2)').text(),
          value: $('tr:nth-child(' + (currIndex+1) + ')').find('td:nth-child(4)').text()
        };
      
      var inputVal = $('tr:nth-child(' + (currIndex+1) + ')').find('td:nth-child(4)').text();
      $('tr:nth-child(' + (currIndex+1) + ')').find('td:nth-child(2)').html('<select id="" class=""><option>Value 1</option></select>');
    $('tr:nth-child(' + (currIndex+1) + ')').find('td:nth-child(4)').html('<input type="text" id="" class="" value="' + inputVal + '"/>');
      for (var i = 0; i < repeat; i++) {
        ++currIndex;
  if(i>0){
        // Storing values into array
        actualVal[(currIndex - 1)] = {
          scope: $('tr:nth-child(' + currIndex + ')').find('td:nth-child(2)').text(),
          value: $('tr:nth-child(' + currIndex + ')').find('td:nth-child(3)').text()
        };

        // changing into edit mode
    
        $('tr:nth-child(' + currIndex + ')').find('td:nth-child(3)').html('<input type="text" id="" class="" value="' + actualVal[(currIndex - 1)].value + '"/>');
        }
        $(this).text('Save');
      }
    } else {
      ++currIndex;
      // Storing values into array
      actualVal[(currIndex - 1)] = {
        scope: $('tr:nth-child(' + currIndex + ')').find('td:nth-child(2)').text(),
        value: $('tr:nth-child(' + currIndex + ')').find('td:nth-child(4)').text()
      };

      // changing into edit mode
     ...