An earlier post permitted formatting for the entire table only. This post allows cells to be individually formatted.
Here is an example of how it looks:
Click Image for larger view
As you can see, each cell is formatted differently.
Here is the code;
<html xmlns='http://www.w3.org/1999/xhtml'>
<head profile='http://gmpg.org/xfn/11'>
<title>Enter Title Here</title>
<style>
body {margin-left:0;margin-right:0;font:normal normal normal 12pt Arial;}a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { }
#table1{position: relative; top: 0; border-collapse: collapse;font:normal normal normal 12pt Arial; visibility: hidden }
td{position:relative; width: 150px; height: 100px; border: 1px solid black; padding: 0}
div{position:relative; width: 150px; height: 100px; white-space: pre-wrap; overflow-y: auto; padding: 5px; background: #fbfbfb}
input, select {position: relative; width: 120px; font:normal normal normal 12pt Arial; }
#bld, #ital,#fnt {width:15px}
#frame{position: absolute; left:0 ; top:0 ; width:100% ; height: 100%; }
#frmat{position:absolute; left: 10%; top: 0; width: 250px; height: 195px; visibility: hidden}
@font-face { font-family: ‘Cancun’;src: url(cancunn-webfont.eot’);src: url((cancunn-webfont.eot?#iefix’) format(’embedded-opentype’),url(‘(cancunn-webfont.woff’) format(‘woff’),url(‘(cancunn-webfont.ttf’) format(‘truetype’),url(‘(cancunn-webfont.svg#CancunPlain’) format(‘svg’);font-weight: normal;font-style: normal;}
@font-face { font-family: ‘Snell Blk BT’;src: url(snellk-webfont.eot’);src: url((snellk-webfont.eot?#iefix’) format(’embedded-opentype’),url(‘(snellk-webfont.woff’) format(‘woff’),url(‘(snellk-webfont.ttf’) format(‘truetype’),url(‘(snellk-webfont.svg#Snell’) format(‘svg’);font-weight: normal;font-style: normal;}
</style>
</head>
<body>
<table id=”table1″ align=”center”>
<textarea id=”frmat” ondblclick=’format2();’></textarea>
var wd = “150px”; var ht = “100px”; var str = “”; var rows = “4”; var cols = “5”; var frmat = false; var el; var el3;
document.onkeyup =KeyCheck;
function KeyCheck(e) {
var KeyID = (window.event) ? event.keyCode : e.keyCode;
switch(KeyID)
{
case 27:
restore();
}
}
function format2() {
document.getElementById(“table1″).style.visibility=”visible”;
document.getElementById(“table1″).style.top=”0”;
el.innerHTML = document.getElementById(“frmat”).value;
document.getElementById(“frmat”).style.visibility=”hidden”;
document.getElementById(“frame”).style.visibility=”hidden”;
}
function format() {
el = document.activeElement;
document.getElementById(“table1″).style.top=”200px”;
document.getElementById(“frame”).style.visibility=”visible”;
frmat = true;
}
function restore() {
document.getElementById(“table1″).style.visibility=”hidden”;
document.getElementById(“frame”).style.visibility=”visible”;
document.getElementById(“sel”).value = “font face”;
document.getElementById(“sel2”).value = “Embed Font”;
document.getElementById(“table1”).style.fontWeight = “normal”;
document.getElementById(“table1”).style.fontStyle = “normal”;
frmat = false;
str = “”;
}
function insertText(str1, str2) {
el3 = document.getElementById(“frmat”);
el3.focus();
var selectionText = el3.value.substr(el3.selectionStart, el3.selectionEnd – el3.selectionStart);
el3.value = el3.value.replace(selectionText, str1 + selectionText + str2);
document.getElementById(“sel”).value = “font face”;
document.getElementById(“sel2”).value = “Embed Font”;
document.getElementById(“bld”).checked = false;
document.getElementById(“ital”).checked = false;
document.getElementById(“fnt”).checked = false;
document.getElementById(“color”).value = “#000000”;
document.getElementById(“sz”).value = “font size eg 12”;
}
function showTable() {
if (frmat) {
document.getElementById(“frmat”).style.visibility=”visible”;
if (! document.getElementById(“bld”).checked && ! document.getElementById(“ital”).checked && ! document.getElementById(“fnt”).checked) document.getElementById(“frmat”).value = el.innerHTML;
if (document.getElementById(“bld”).checked) insertText(““,”“);
if (document.getElementById(“ital”).checked) insertText(““,”“);
if (document.getElementById(“sel2”).value != “Embed Font”) {
var s3 = document.getElementById(“sel2”).value;
} else {
s3 = document.getElementById(“sel”).value;
}
if (document.getElementById(“fnt”).checked) insertText(““, ““);
}
if (! frmat) {
if (document.getElementById(“rows”).value != “# rows”) rows = document.getElementById(“rows”).value;
if (document.getElementById(“cols”).value != “# columns”) cols = document.getElementById(“cols”).value;
if (document.getElementById(“wd”).value != “width eg; 150”) wd = document.getElementById(“wd”).value;
if (document.getElementById(“ht”).value != “height eg; 100”) ht = document.getElementById(“ht”).value;
for (var i=1; i’;
for (var j=1; j
‘;
}
str += ‘
‘;
}
document.getElementById(“table1”).innerHTML=str;
if (document.getElementById(“sz”).value != “font size eg 12”) {
document.getElementById(“table1”).style.fontSize = document.getElementById(“sz”).value + “pt”;
} else {
document.getElementById(“sz”).value = “5”;
}
if (document.getElementById(“bld”).checked) document.getElementById(“table1”).style.fontWeight = “700”;
if (document.getElementById(“ital”).checked) document.getElementById(“table1”).style.fontStyle = “italic”;
document.getElementById(“table1”).style.color = document.getElementById(“color”).value;
if (document.getElementById(“sel”).value != “font face”) {
document.getElementById(“table1”).style.fontFamily = document.getElementById(“sel”).value;
} else {
document.getElementById(“sel”).value = “Arial”;
}
if (document.getElementById(“sel2”).value != “Embed Font”)
document.getElementById(“table1”).style.fontFamily=document.getElementById(“sel2”).value;
document.getElementById(“table1″).style.visibility=”visible”;
document.getElementById(“frame”).style.visibility=”hidden”;
}
}
</body></html>
Double clicking a cell brings back the interface. Hitting GO then opens a textarea with the cell text inserted:
Click Image for larger view
HTML tags can be inserted in the textarea by choosing values,selecting some text and hitting GO. When the textarea is doubleclicked, the selected cell is formatted.
The following code does the formatting:
if (frmat) {
document.getElementById(“frmat”).style.visibility=”visible”;
if (! document.getElementById(“bld”).checked && ! document.getElementById(“ital”).checked && ! document.getElementById(“fnt”).checked) document.getElementById(“frmat”).value = el.innerHTML;
if (document.getElementById(“bld”).checked) insertText(“<b>”,”</b>”);
if (document.getElementById(“ital”).checked) insertText(“<i>”,”</i>”);
if (document.getElementById(“sel2”).value != “Embed Font”) {
var s3 = document.getElementById(“sel2”).value;
} else {
s3 = document.getElementById(“sel”).value;
}
if (document.getElementById(“fnt”).checked) insertText(“<font face=\”” + s3 + “\” color=\”” + color.value + “\” size=\”” + sz.value + “\”>”, “</font>”);
}
el3 = document.getElementById(“frmat”);
el3.focus();
var selectionText = el3.value.substr(el3.selectionStart, el3.selectionEnd – el3.selectionStart);
el3.value = el3.value.replace(selectionText, str1 + selectionText + str2);
This post uses HTML tags for the formatting. The next installment will use styles, allowing more versatility.
Tips & Tricks 