<html>
<head>
<title>Contenteditable outerHTML Ideas - RJM Programming - March, 2022</title>
<style>
td { border: 2px solid red; }
th { border: 2px solid red; }
div.indiv { font-size: 12px; background-color: yellow; }
</style>
<script type='text/javascript'>
var cells=[];
var tds=[];
function cit(dele) {
var tdrel=eval(0 + eval(('' + dele.id).replace('div','')));
document.getElementById('prediv' + tdrel).innerHTML=((dele.innerText || dele.contentWindow || dele.contentDocument).replace(/\<\%/g,'<').replace(/\>\;/g,'>')).split('</div>')[0] + (dele.innerText || dele.contentWindow || dele.contentDocument).replace(/\</g,'<').replace(/\>/g,'>') + '</div>';
}
function tablehit() {
var wpush=[], hpush=[];
var wrand=0, hrand=0;
tds=document.getElementsByTagName('td');
for (var ii=0; ii<tds.length; ii++) {
wpush.push(eval(33 + Math.floor(eval(ii / 3)) * 33));
hpush.push(eval(33 + eval(ii % 3) * 33));
cells.push(tds[ii].getBoundingClientRect());
}
var hcell=eval('' + tds[0].getBoundingClientRect().height);
var wcell=eval('' + tds[0].getBoundingClientRect().width);
document.getElementById('mytable').style.height='' + screen.height + 'px';
for (var jj=0; jj<tds.length; jj++) {
hrand=Math.floor(Math.random() * hcell);
while (eval('' + hrand) > eval(2 * eval(eval('' + hcell) / 3))) {
hrand=Math.floor(Math.random() * hcell);
}
wrand=Math.floor(Math.random() * wcell);
while (eval('' + wrand) < eval(eval('' + wcell) / 3)) {
wrand=Math.floor(Math.random() * wcell);
}
tds[jj].innerHTML='<div id=prediv' + eval(1 + jj) + '><div class=indiv id=div' + eval(1 + jj) + ' onblur=cit(this); contenteditable=true style="background-color:yellow;position:absolute;top:calc(' + hpush[jj] + '% - ' + hrand + 'px);left:calc(' + wpush[jj] + '% - ' + wrand + 'px);width:' + wrand + 'px;"></div></div>';
document.getElementById('div' + eval(1 + jj)).innerHTML=document.getElementById('div' + eval(1 + jj)).outerHTML.replace(/\</g,'<').replace(/\>/g,'>');
}
}
</script>
</head>
<body onload="tablehit();">
<table border=10 id=mytable style="width:100%;height:100%;" title="Contenteditable outerHTML Ideas - RJM Programming - March, 2022">
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
</body>
</html>