JSFiddle - React, Tailwind, and code Playground

by nobuts

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div id="status"></div>
<table class="table table-bordered table-striped">
    <tr>
        <td id="table_col1:1" contenteditable="true">
            content1
        </td>
        <td id="table_col1:2" contenteditable="true">
            content2
        </td>
        <td id="table_col1:3" contenteditable="true">
            content3
        </td>
    </tr>
</table>

CSS

#status{
    background:#ff0000;
    border:solid 1px #ccc;
    border-radius:5px;
    color:#fff;
    display:none;
    padding:5px;
    width:100%;    
}

JavaScript

var message_status = $("#status");
		$("td[contenteditable=true]").blur(function(){
			var cols3_key = $(this).attr("id") ;
			var value = $(this).text() ;
			$.post('' , cols3_key + "=" + value, function(data){
				if(data != ''){
					$('td[id="'+cols3_key+'"]').addClass('alert-danger');
					message_status.slideDown();
					message_status.text(data);
					//hide the message
					setTimeout(function(){message_status.slideUp()},3000);
					setTimeout(function(){$('td[id="'+cols3_key+'"]').removeClass('alert-danger')},3000);
				}
			});
		});