JSFiddle - React, Tailwind, and code Playground

by Murali Kaliappan

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    

<table class="table">
  <thead>
  <tr>
    <th width="10%">S.No</th><th width="30%">Name</th><th width="30%">Age</th>        
    <th width="30%">Action</th>   </tr>     
  </thead>
  <tbody>
    
  </tbody>

</table>

CSS

.margin-rt {
  margin-right: 10px;
}

span:hover {
  cursor: pointer;
}

JavaScript

var responseObj = [ {"first" :{"name":"suresh","age":24}},
                    {"second" :{"name":"kishore","age":10}},
                    {"third" :{"name":"murali","age":21}},
                    {"fourth" :{"name":"suresh kishore","age":20}},
                    {"fifth" :{"name":"veeraj","age":10}}														]
var editBtn = '<span class="glyphicon glyphicon-edit margin-rt">';
var delBtn	= '</span><span class="glyphicon glyphicon-trash"></span>';
$.each(responseObj, function(index,obj){
	$("table tbody").append('<tr>');
  $("table tbody").find("tr:last").append("<td>"+index);
  $("table tbody").find("tr:last").append("<td>"+Object.values(obj)[0]["name"]);
  $("table tbody").find("tr:last").append("<td>"+Object.values(obj)[0]["age"]);
  $("table tbody").find("tr:last").append('<td>'+editBtn+delBtn);

})

$("tbody").on("click","td span.glyphicon-edit",function(){
	$(this).parents("tr").find("td").not(":first").each(function(){  	
    
    if( $(this).is(":last-child") ) {
    	var saveBtn = "<input type='button' value='save' class='btn btn-sm btn-success margin-rt'/>";
      var cancelBtn = "<input type='button' value='cancel' class='btn btn-sm btn-danger'/>"
      $(this).html("").append(saveBtn+cancelBtn);
      
    }else {
    	var cellValue = $(this).html();
      $(this).html("");
      console.log($(this).index())
      var headerName = $("thead").find("th:eq("+$(this).index()+")").html();
      
      $(this).append("<input type='text' name='"+headerName+"' value='"+cellValue+"'/>")    
    }        
  })	
})

$("tbody").on("click","td input[value='cancel']",function(){

	$(this).parents("tr").find("td").not(":first").each(function(){
  	if($(this).is(":last-child")) {
    	$(this).html("").append(editBtn+delBtn);
    } else {
    	var cellValue = $(this).find("input").val();
      $(this).html("").text(cellValue);      
    }  
  
  })
})


$("tbody").on("click","td input[value='save']",function(){
	var requestObj = {};	
  
  
 ...