taBleSkiRt - For RB generated tables(Updated 8/09)

• New demo (need test pilots) Had some issues with code editor hanging.hvacore.net/seaside/go/runbasicpersonal?app=TSdemo2
  
• Added a table size to the function
  

' -
' ---------- taBleSkIrT ----------
' -

function skirtSql(#db, File,ドル tblClass,ドル thBdrColor,ドル thTxtColor,ドル tblWidth,ドル trBgColor,ドル tblSize$)

 if left$(File,ドル 1) = "#" then
 thColor$ = File$
 else
 thColor$ = ""
 end if

 if tblClass$ = "" then 
 tblErr$ = "ERROR: A ""Class"" must be assigned to your table in order to render correctly."
 call tblError tblErr$
 end if

 if thBdrColor$ = "" then thBdrColor$ = "#C0C0C0"
 if thTxtColor$ = "" then thBdrColor$ = "#000000"
 if tblWidth$ = "" then tblWidth$ = "600px"
 if trBgColor$ = "" then trBgColor$ = "#FFFFCC"
 if tblSize$ = "" then tblSize$ = "m" 

 if #db isnull() then 
 tblErr$ = "ERROR: Data table not found!"
 call tblError tblErr$
 end if

 size$ = lower$(tblSize$)
 Select case size$
 case "s"
 fontSize$ = "65%"
 paddingTB$ = "2px"
 paddingLR$ = "8px"

 case "m"
 fontSize$ = "75%"
 paddingTB$ = "4px"
 paddingLR$ = "11px"

 case "l"
 fontSize$ = "88%"
 paddingTB$ = "6px"
 paddingLR$ = "15px"
 end Select 

' -------- Preset Variables --------
 tblBdrColor$ = "#dddddd"
 cptBgColor$ = "white" 

' -------- Preset Images --------
 cptImage$ = "url(/TableImg/grayBars.png);"
 hdrImage$ = "url('"+File$+"');"

' -------- Classes for CSS --------
 thClass$ = tblClass$ + "THmod"
 tdClass$ = tblClass$ + "TDmod"
 trClass$ = tblClass$ + "TRmod"
 CPTclass$ = tblClass$ + "capAlt" ' JavaScript adds capAlt to the element class

 #db cssclass(tblClass$)
 #db thclass(thClass$)
 #db trclass(trClass$)

 cssclass "table.";tblClass$;"", "{
	margin-top: 0.5em;
	border: 1px solid ";tblBdrColor$;";
 border-collapse: collapse;
 width: ";tblWidth$;";
 font-family: arial;
 font-size: ";fontSize$;";
 }"

 cssclass "caption.";CPTclass$;"", "{
 background-color: ";cptBgColor$;";
 padding: ";paddingTB$;" ";paddingLR$;";
 background-image: ";cptImage$;";
 border: 1px dotted #C0C0C0;
 font-family: arial;
 font-size: 100%;
 }"

 cssclass "th.";thClass$;"","{
 border: 1px solid ";thBdrColor$;";
	border-bottom: 4px solid ";thBdrColor$;";
	padding: ";paddingTB$;" ";paddingLR$;";
	background-image: ";hdrImage$;";
 background: ";thColor$;";
	background-repeat: repeat-x;
	color: ";thTxtColor$;";
	text-align: center;
 font-family: arial;
 }"

 cssclass "td", "{
	padding: ";paddingTB$;" ";paddingLR$;";
 }"
 
 cssclass "tr.";trClass$;"", "{
 background-color: ";trBgColor$;";
 border-bottom: 1px dotted #C0C0C0;
 border-top: 1px dotted #C0C0C0;
 }"

 cssclass "tr.alt", "{
	background-color: white;
 }"

'------ JavaScript Object ------
html "</div>
 <script type='text/javascript'>
 var RB = {};

 RB.getElementsByClassName = function(newClass)
 {
 var ElementArr = [];
 ElementArr = document.getElementsByTagName('*');
 var match = [];
 var patternMatch = new RegExp('(^| )' +newClass+ '(|$)');
 for (var x = 0; x < ElementArr.length; x++)
 {
 if (patternMatch.test(ElementArr[x].className))
 {
 match[match.length] = ElementArr[x];
 }
 }
 return match;
 };

 RB.tableStripes = function(tblClass)
 {
 var myTables = RB.getElementsByClassName(tblClass);
 for (var w = 0; w < myTables.length; w++)
 {
 var tbodys = myTables[w].getElementsByTagName('tbody');
 for(var i = 0; i < tbodys.length;i++)
 {
 var rows = tbodys.getElementsByTagName('tr');
 for (var k = 1; k < rows.length; k+=2)
 {
 rows[k].className = 'alt';
 }
 }
 } 
 };

 RB.tableCaption = function(tblClass)
 {
 var myTables = RB.getElementsByClassName(tblClass);
 for (var p = 0; p < myTables.length; p++)
 {
 var newCaption = myTables
.getElementsByTagName('caption');
 for (var x = 0; x < newCaption.length; x++)
 {
 newCaption[x].className = tblClass + 'capAlt';
 }
 }
 };

 RB.tblHiLite = function(HiLiteColor, tblClass)
 {
 var myTables = RB.getElementsByClassName(tblClass);
 for (var p = 0; p < myTables.length; p++)
 {
 var tbodys = myTables
.getElementsByTagName('tbody');
 for (var i = 0; i < tbodys.length; i++)
 {
 var rows = tbodys.getElementsByTagName('tr');
 for (var k = 1; k < rows.length; k++)
 {
 rows[k].onmouseover = function()
 {
 this.style.backgroundColor=HiLiteColor
 };
 rows[k].onmouseout = function()
 {
 this.style.backgroundColor=''
 };
 }
 }
 }
 };

</script>"
End function

Sub tblError a$
 
 html "
 <script type = 'text/javascript'>
 alert('";a$;"');
 </script>"
 
End sub

 Core.tableCaption = function(tblClass)
 {
 var myCaption = Core.getElementsByClassName(tblClass);
 for (var p = 0; p < myCaption.length; p++)
 {
 var newCaption = myCaption
.getElementsByTagName('caption');
 newCaption
.className = tblClass + 'capAlt';
 }
 };

 Core.tableCaption = function(tblClass)
 {
 var myCaption = Core.getElementsByClassName(tblClass);
 for (var p = 0; p < myCaption.length; p++)
 {
 var newCaption = myCaption
.getElementsByTagName('caption');
 newCaption
.className = tblClass + 'capAlt';
 }
 };

 Core.tableCaption = function(tblClass)
 {
 var myCaption = Core.getElementsByClassName(tblClass);
 for (var p = 0; p < myCaption.length; p++)
 {
 var newCaption = myCaption
.getElementsByTagName('caption');
 newCaption[0].className = tblClass + 'capAlt';
 }
 };

run "TableSkirt", #tblSkirt
render #tblSkirt
'.
'// RB code here
'.
sqliteconnect #DB9, "buggs.db"
text$ = "select ID,USERNAME,DESCRIPTION,EMAIL from entries"
#DB9 execute(text$)
#DB9 caption("Modified table with Graphic header, Stripes, Row Highlights, and Caption Image")
#DB9 link("ID", "viewEntry")

'-- Add new class --
#tblSkirt skirtSql(#DB9, "/TableImg/BlkGrayBar.png", "M", "#551A8B", "white", "800px","#FFBBFF")
render #DB9
'.
'. // JavaScript is called AFTER the RENDER statement
'.
html "<script type='text/javascript'>
Core.tableStripes('M');
Core.tblHiLite('#DC143C', 'M');
Core.tableCaption('M');
</script>"

#DB9 disconnect()
wait

 Core.tableCaption = function(tblClass)
 {
 var myCaption = Core.getElementsByClassName(tblClass);
 for (var p = 0; p < myCaption.length; p++)
 {
 var newCaption = myCaption
.getElementsByTagName('caption');
 for (var i = 0; i < newCaption.length; i++)
 {
 newCaption.className = tblClass + 'capAlt';
 }
 }
 };