JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<body>

	 <nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#"></a>
		</div>

		<!-- Collect the nav links, forms, and other content for toggling -->
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<form id="search-form" class="navbar-form navbar-left" role="search" action="/" >
				<div class="form-group">
					<input type="text" class="form-control" placeholder="" name="q" value="asdf">
				</div>
				<button type="submit" class="btn btn-default">Find</button>
			</form>
			
			
			<ul id="add-contact" class="nav navbar-form navbar-left" >
				<li><button id="add-btn" type="button" class="btn btn-default">+</button></li>
			</ul>

			<form id="logout-form">
			<ul class="nav navbar-nav navbar-right">
				<li><a href="#">username</a></li>
				<li><a id="logout-btn" href="#">exit</a></li>

			</ul>
			<input name="csrft" type="hidden" value="9178305246">
			</form>
			
		</div><!-- /.navbar-collapse -->

	</div><!-- /.container-fluid -->
</nav>

		<div class="container-fluid">
		<form id="change-form" method="post"><input name="csrft" type="hidden" value="9178305246"></form>
		
		

		<table id="search-result" class="table table-striped">
		<thead>
		<tr>
			 
					 <th class="A">A</th>
			
					 <th class="B">B</th>
			
					 <th class="C">C</th>
			
					 <th class="D">D</th>
			
					 <th class="E">E</th>
			
		</tr>
		</thead>
		<tbody>
		 
				
				<tr id="123" class="contact">
					 
					...

CSS

td.control {
	width: 100px;
		
	}
td.name, td.title {
		width: 20%;
	}
	td.mail {
		width: 10%;
	}
	td.telephoneNumber{
		width: 5%
	}

input {
    width: 95%;
    padding: 10px;
    margin: 0px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

JavaScript

function change_record(){
	var tr = $(this).parent().parent().parent();
	var objectGUID = tr.attr('id');
	var class_rec = tr.attr('class');
	class_rec = class_rec.split(' ');
	var fields = []
	if (class_rec.indexOf('user') != -1){
		 fields = [
			'C',
			'D',
			'E'
		];
	}
	else if (class_rec.indexOf('contact') != -1 ){
		fields = ['A',
			'B',
			'C',
			'D',
			'E'
		];
	}

	for (x = 0; x < fields.length; x++){
			
			var td =  tr.children('.' + fields[x]);
            var td_width = td.width();
			
			var placeholder = td.text();
			td.text('');

			var input_elm = $('<input form="change-form" type="text" class="form-control"/>');
			
			input_elm.attr('name', fields[x]);
			input_elm.val(placeholder);
            input_elm.css('width', td_width-20);
			td.append(input_elm);


		}
	var control_el = edited_tr.children('.control');
	control_el.text('');

	control_el.append($('<div class="btn-group btn-group btn-group-sm">\
		<button id="save-changes"  type="button" form="change-form"  class="btn btn-success"><span class="glyphicon glyphicon-ok-sign "></span></button>\
		<button id="cancel-changes" type="button" class="btn btn-default"><span class="glyphicon glyphicon-ban-circle "></span></button>\
		</div>'))
	edited_tr.insertAfter($(tr));
	tr.addClass('origin-tr');

	
}
$(".edit-row").bind( "click", change_record);