JSFiddle - React, Tailwind, and code Playground

by Nikita Rane

HTML

<table width="100%" border="1" cellpadding="2" cellspacing="2" class="test">
<tr>
<td>Name</td>
<td>Emp no.</td>
<td>Company</td>
<td>Mobile no.</td>
</tr>
<tr>
<td><input type="text" class="txtbox" value="" /></td>
<td><input type="text" class="txtbox" value="" /></td>
<td><input type="text" class="txtbox" value="" /></td>
<td><input type="button" value="Save" id="savebtn" /><input type="button" value="Add" class="plusbtn" /><input type="button" value="minus" class="minusbtn" /></td>
</tr>
</table>

CSS

.txtbox{
border:none;
width:100%;
}

JavaScript

$(document).ready(function(){
$("#savebtn").click(function(){
  if (($('.test tr input').val().length) == 0) {
  alert("FAIL - all textboxes on last row are empty.");  
        } 
		else if($('#savebtn').val() == 'Edit'){

		alert("edit");
		$(this).parent().siblings().each(function(){


	$(this).append("<input type='text' class='txtbox' value="  + $(this).text() +  ">");
		
		});
		}
		
        else {
            alert('SUCCESS - at least 1 value is filled in!');
			this.value = 'Edit';
			   $(this).parent().siblings().each(function(){
            $(this).text($(this).find('input').val());
            });
        }
		});


$( "table" ).delegate( ".plusbtn", "click", function() {
alert("dfgdf");
$(".test").append('<tr><td><input type="text" class="txtbox" value="" /></td><td><input type="text" class="txtbox" value="" /></td><td><input type="text" class="txtbox" value="" /></td><td><input type="button" value="Save" id="savebtn" /><input type="button" value="Add" class="plusbtn" /><input type="button" value="minus" class="minusbtn" /></td></tr>');

});
$( "table" ).delegate( ".minusbtn", "click", function() {

alert("aaaa");
$(this).closest('tr').remove();

});
});