{"id":66533,"date":"2006-09-06T17:51:00","date_gmt":"2006-09-06T17:51:00","guid":{"rendered":"https:\/\/blogs.technet.microsoft.com\/heyscriptingguy\/2006\/09\/06\/how-can-i-alternate-row-colors-in-an-hta\/"},"modified":"2006-09-06T17:51:00","modified_gmt":"2006-09-06T17:51:00","slug":"how-can-i-alternate-row-colors-in-an-hta","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/scripting\/how-can-i-alternate-row-colors-in-an-hta\/","title":{"rendered":"How Can I Alternate Row Colors in an HTA?"},"content":{"rendered":"

\"Hey, \n

Hey, Scripting Guy! How can I alternate row colors (using the green\/white style) in an HTA?

— MK<\/P>\"Spacer\"\"Hey,\"Script<\/A> \n

Hey, MK. You know, we almost didn\u2019t answer you question. Not because it wasn\u2019t a good question, but simply because \u2013 like all the questions we get \u2013 we received this one in email. Based on what happened recently at Radio Shack<\/A>, the Scripting Guys are a little leery about reading their email these days. And for good reason.<\/P>\n\n<\/THEAD>\n\n\n
\n

Note<\/B>. Actually, we like<\/I> reading our email: it\u2019s heartening to see how many people care about the Scripting Guys. For example, nearly every message we get starts out \u201cWhat is wrong<\/I> with you guys?\u201d We\u2019d just like to say that we\u2019re all doing fine. But thank you for asking; it brightens our day to know that you worry about us like that!<\/P><\/TD><\/TR><\/TBODY><\/TABLE>\n

<\/DIV>\n

Of course, having gone ahead and read your email, we don\u2019t have much choice except to try and answer it, do we? (Hmmm, maybe that\u2019s another reason why we shouldn\u2019t read our email \u2026.) Correct us if we\u2019re wrong (note to the people who do the hiring \u2013 and firing \u2013 at Microsoft: the Scripting Guys are never <\/I>wrong), but it sounds like you want to dynamically create a table in an HTML Application (HTA). But not just any table; instead, you want a table where the rows are displayed in alternate colors (green, then white, then green, then white, then \u2026.). Can you do that? You bet you can. And while there are probably a number of different ways to accomplish that feat we chose this approach:<\/P>

<html><\/p>\n
<SCRIPT Language=”VBScript”><\/p>\n
    Sub CreateTable\n        strHTML = “<table width=’100%’ border>”<\/p>\n
        For i = 1 to 11\n            x = i Mod 2\n            If x = 0 Then\n                strHTML = strHTML & “<tr>”\n            Else\n                strHTML = strHTML & “<tr bgcolor=’lightgreen’>”\n            End If\n            strHTML = strHTML & “<td width=’100%’>&nbsp;<\/td>”\n            strHTML = strHTML & “<\/tr>”\n        Next<\/p>\n
        strHTML = strHTML & “<\/table>”\n        TableArea.InnerHTML = strHTML\n    End Sub<\/p>\n
<\/SCRIPT><\/p>\n
<body>\n    <input id=runbutton type=”button” value=”Create Table” name=”run_button” onClick=”CreateTable”><p>\n    <span id=TableArea><\/span>\n<\/body><\/p>\n
<\/html>\n<\/PRE>\n
What\u2019s that? Explain how this all works? Sorry; we don\u2019t have time for that. Besides, what are they going to do if we don\u2019t<\/I> explain how this all works: fire us?<\/P>\n
On second thought, maybe we should explain how this all works. To begin with, the HTA is about as simple as we could make it. For example, the body of the HTA consists of just two items: a button that, when clicked runs a subroutine named CreateTable; and a span with the ID TableArea. As you can probably guess, that\u2019s the portion of the HTA window where we\u2019ll create our table.<\/P>\n
Here\u2019s what the <BODY> tag, in all its limited glory, looks like:<\/P>
<body>\n    <input id=runbutton type=”button” value=”Create Table” name=”run_button” onClick=”CreateTable”><p>\n    <span id=TableArea><\/span>\n<\/body>\n<\/PRE>\n
The true excitement takes place in the subroutine CreateTable, where we dynamically create the green-and-white striped table. In order to do that we need to construct the table in memory and then write the completed table to the HTA. Step 1 in that process is to assign the starting tag for the table to a variable named strHTML:<\/P>
strHTML = “<table width=’100%’ border>”\n<\/PRE>\n
Now comes the fun part. For demonstration purposes we\u2019re going to create a table consisting of 11 blank rows. With that in mind, we begin by setting up a For Next loop that runs from 1 to 11:<\/P>
For i = 1 to 11\n<\/PRE>\n
We then have this unusual line of code:<\/P>
x = i Mod 2\n<\/PRE>\n
As it turns out, the Mod<\/B> operator divides two numbers (in this case, it divides the counter variable i by 2) and then returns the remainder. (Strange but true.) In other words, the first time we run through our loop the counter variable i is equal to 1. Therefore, this line of code divides 1 by 2, which results in zero with a remainder of 1, and stores the remainder (1) in the variable x.<\/P>\n
Why the heck would we do that<\/I>? Well, we want to alternate row colors: odd-numbered rows will be green, even-numbered rows will be white. One really easy way to determine whether a number is even or odd is to divide it by 2 and take a peek at the remainder. If the remainder is 0 then we have an even number; if the remainder is anything but<\/I> 0 then we have an odd number. Seeing as how the Mod operator returns just the remainder we can determine whether a number (and thus a row in the table) is odd or even simply by checking to see if x is equal to 0:<\/P>
If x = 0 Then\n<\/PRE>\n
Suppose we do<\/I> have an even number; what then? Well, if the remainder is equal to 0 we simply tack on code for creating a new table row to the variable strHTML:<\/P>
strHTML = strHTML & “<tr>”\n<\/PRE>\n
And if the remainder is not<\/I> equal to 0, meaning we have an odd number? In that case we also tack on code to create a new table row; the only difference is that, this time around, we include the bgcolor<\/B> parameter and set the background color of the row to lightgreen:<\/P>
strHTML = strHTML & “<tr bgcolor=’lightgreen’>”\n<\/PRE>\n
See how that works? For even-numbered rows we create a new row without specifying a background color; for odd-numbered rows we create a new row and set the background color to lightgreen. The net effect: we\u2019ll end up with alternating rows of green and white.<\/P>\n
After creating the new row we use this code to create a new table cell (a cell containing a blank space, as indicated by the &nbsp<\/B> construction), then use the <\/tr> tag to close off the row:<\/P>
strHTML = strHTML & “<td width=’100%’>&nbsp;<\/td>”\nstrHTML = strHTML & “<\/tr>”\n<\/PRE>\n
With row number 1 finished we then loop around and repeat the process until we\u2019ve added 11 rows to our table. That brings us to these two lines of code:<\/P>
strHTML = strHTML & “<\/table>”\nTableArea.InnerHTML = strHTML\n<\/PRE>\n
In the first line we add the <\/table> tag to the variable strHTML; that simply indicates that the table is now complete. We then use the second line of code to set the InnerHTML<\/B> property of the TableArea span to the value of strHTML (strHTML, of course, contains all the HTML tagging required to create a green-and-white striped table). The moment we do that our HTA should look like this:<\/P>\"HTA\" \n

Which is pretty much what we wanted it to look like.<\/P>\n\n<\/THEAD>\n\n\n
\n
Note<\/B>. Yes, we know: <SPAN> tags and InnerHTML properties; all that stuff can be terribly confusing if you\u2019re new to HTAs or to dynamic HTML. In that case you might take a peek at some of the articles in the HTA Developers Center<\/B><\/A>.<\/P><\/TD><\/TR><\/TBODY><\/TABLE>\n
<\/DIV>\n
There you have it, MK; that should be enough to get you started. As for us, we need to buckle down and get to work. Sure, it\u2019s easy to say \u201cThe Scripting Guys? Microsoft would never fire the Scripting Guys.\u201d But that\u2019s what they said about Clippy the Paperclip<\/A>, too. If Microsoft is willing to fire Clippy, well, it\u2019s hard to believe that anyone\u2019s job could be safe around here. If you need us we\u2019ll be in our office. Working.<\/P>\n
Yes, yes: for once.<\/P><\/p>\n","protected":false},"excerpt":{"rendered":"
Hey, Scripting Guy! How can I alternate row colors (using the green\/white style) in an HTA?— MK Hey, MK. You know, we almost didn\u2019t answer you question. Not because it wasn\u2019t a good question, but simply because \u2013 like all the questions we get \u2013 we received this one in email. Based on what happened […]<\/p>\n","protected":false},"author":595,"featured_media":87096,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[3,4,5,30],"class_list":["post-66533","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-scripting","tag-scripting-guy","tag-scripting-techniques","tag-vbscript","tag-web-pages-and-htas"],"acf":[],"blog_post_summary":"
Hey, Scripting Guy! How can I alternate row colors (using the green\/white style) in an HTA?— MK Hey, MK. You know, we almost didn\u2019t answer you question. Not because it wasn\u2019t a good question, but simply because \u2013 like all the questions we get \u2013 we received this one in email. Based on what happened […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/66533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/users\/595"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/comments?post=66533"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/66533\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/media\/87096"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/media?parent=66533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/categories?post=66533"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/tags?post=66533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}