JSFiddle - React, Tailwind, and code Playground

by Siim Pari

HTML

<body>

<h1>Dynamic tables</h1>
<p>Hover over a TD to see its properties.</p>
<p>Click on it, to be able to create a connection with another TD.</p>
<br>

<table id="maintable" border="1">
    <tr>
      <td id="td1" data-bubble='{"part":"TD1","location":"R1F:D3-4:E1"}'>TD1</td>
      <td id="td3" data-bubble='{"part":"TD3","location":"R2F:D3-4:E3"}'>TD3</td>
      <td id="td5" data-bubble='{"part":"TD5","location":"R3F:D3-4:E5"}'>TD5</td>
    </tr>
	<tr>
      <td id="td2" data-bubble='{"part":"TD2","location":"R1F:D3-4:E2"}'>TD2</td>
      <td id="td4" data-bubble='{"part":"TD4","location":"R2F:D3-4:E4"}'>TD4</td>
      <td id="td6" data-bubble='{"part":"TD6","location":"R3F:D3-4:E6"}'>TD6</td>
    </tr>
	
</table>

<br><br>

<table id="bubbleTable" border="1" style="display:none;">
    <td>
    Selected tablepart:<br>
    <b class="part"></b><br>
    Location:<br>
    <b class="location"></b><br>
    Connection:<br>
    none <button id="create3">Create</button>
    </td>
</table>


</body>

CSS

#bubbleTable {
	text-align: center;
	display:none;
	color: black;
	background-color: yellow;
}
body {
    background-color: #d0e4fe;
}

JavaScript

$(document).ready(function(){
	$("#maintable").show();

	$( "#maintable td" ).click(function() {
		if($("#bubbleTable").attr('clicked')=='true'){
			$("#bubbleTable").attr('clicked','false'); 
		} 
		else {
		$("#bubbleTable").attr('clicked','true');
		}

		if($("#bubbleTable").attr('data-mouseover')=='true'){
			$("#bubbleTable").attr('data-mouseover','false'); 
		}
		else {
			$("#bubbleTable").toggle().attr('data-mouseover','false');
			var bubData=jQuery.parseJSON($(this).attr("data-bubble"));
			console.log(bubData);
			$("#bubbleTable b.part").text(bubData.part);
			$("#bubbleTable b.location").text(bubData.location);
		}
    });
	$( "#maintable td" ).mouseover(function() {
		if($("#bubbleTable").attr('clicked')!='true'){
			$("#bubbleTable").show().attr('data-mouseover','true');
			var bubData=jQuery.parseJSON($(this).attr("data-bubble"));
			console.log(bubData);
			$("#bubbleTable b.part").text(bubData.part);
			$("#bubbleTable b.location").text(bubData.location);
		} 
    });
	$( "#maintable td" ).mouseout(function() {	
		if($("#bubbleTable").attr('data-mouseover')=='true'){
			$("#bubbleTable").hide();
		};
    });
});