JSFiddle - React, Tailwind, and code Playground

by gsivanov

HTML

<table id="tab1" class="KKK" style="border:1px solid brown;">

		<tr style="background-color:#335533; color:white; ">
			<th style="width:30px"> ID </th>
			<th style="width:220px"> Comment </th>	
			<th style="text-align:right;"> Period  </th>
			<th style="width:120px; text-align:right;"> Amount </th>
			<th> Vendor </th>
		</tr>
		<tr>
			<td>1</td>
			<td> Comm ent1 111 1111	</td>
			<td class="Prc">1	</td>
			<td class="Prc">1.111</td>
			<td> suVendor hnh g</td>
		</tr>
		<tr>
			<td>2</td>
			<td>	Comment22 2222	</td>
			<td class="Prc">2	</td>
			<td class="Prc">2.457</td>
			<td>	endor fhgh ffg	</td>
		</tr>
		<tr>
			<td>3</td>
			<td>	Comment	hng dfggg</td>
			<td class="Prc">3	</td>
			<td class="Prc">3.784</td>
			<td>	sum.V endor4 4444444	</td>
		</tr>
	</table>

CSS

body {
	font-family: Helvetica;
}
input::-ms-clear {
	display: none;
}			
td.Prc {
	min-width: 60px;
	text-align: right;
}
table.KKK {
	border: 0;
	border-spacing: 0;
	}

table.KKK th {
	color: white;
	background-color: #335033;
}

table.KKK tr:nth-child(even) {
	background: #efefef;
}

table.KKK td {
	border: 2px solid #e1e1e1;
	padding: 3px;
}

JavaScript

function getStyle(el, cssprop) {
	if (el.currentStyle)
		return el.currentStyle[cssprop];	 // IE
	else if (document.defaultView && document.defaultView.getComputedStyle)
		return document.defaultView.getComputedStyle(el, "")[cssprop];	// Firefox
	else
		return el.style[cssprop]; //try and get inline style
}

function applyEdit(tabID, editables) {
	var tab = document.getElementById(tabID);
	if (tab) {
		var rows = tab.getElementsByTagName("tr");
		for(var r = 0; r < rows.length; r++) {
			var tds = rows[r].getElementsByTagName("td");
			for (var c = 0; c < tds.length; c++) {
				if (editables.indexOf(c) > -1)
					tds[c].onclick = function () { beginEdit(this); };
			}
		}
	}
}
var oldColor, oldText, padTop, padBottom = "";
function beginEdit(td) {

	if (td.firstChild && td.firstChild.tagName == "INPUT")
		return;

	oldText = td.innerHTML.trim();
	oldColor = getStyle(td, "backgroundColor");
	padTop = getStyle(td, "paddingTop");
	padBottom = getStyle(td, "paddingBottom");

	var input = document.createElement("input");
	input.value = oldText;

	//// ------- input style -------
	var left = getStyle(td, "paddingLeft").replace("px", "");
	var right = getStyle(td, "paddingRight").replace("px", "");
	input.style.width = td.offsetWidth - left - right - (td.clientLeft * 2) - 2 + "px";
	input.style.height = td.offsetHeight - (td.clientTop * 2) - 2 + "px";
	input.style.border = "0px";
	input.style.fontFamily = "inherit";
	input.style.fontSize = "inherit";
	input.style.textAlign = "inherit";
	input.style.backgroundColor = "LightGoldenRodYellow";

	input.onblur = function () { endEdit(this); };

	td.innerHTML = "";
	td.style.paddingTop = "0px";
	td.style.paddingBottom = "0px";
	td.style.backgroundColor = "LightGoldenRodYellow";
	td.insertBefore(input, td.firstChild);
	input.select();
}
function endEdit(input) {
	var td = input.parentNode;
	td.removeChild(td.firstChild);	//remove input
	td.innerHTML = input.value;
	if (oldText != input.value.trim() )
		td.style.color =...