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’t answer you question. Not because it wasn’t a good question, but simply because – like all the questions we get – we received this one in email. Based on what happened recently at Radio Shack, the Scripting Guys are a little leery about reading their email these days. And for good reason.
|
Note. Actually, we like reading our email: it’s heartening to see how many people care about the Scripting Guys. For example, nearly every message we get starts out “What is wrong with you guys?” We’d just like to say that we’re all doing fine. But thank you for asking; it brightens our day to know that you worry about us like that! |
Of course, having gone ahead and read your email, we don’t have much choice except to try and answer it, do we? (Hmmm, maybe that’s another reason why we shouldn’t read our email ….) Correct us if we’re wrong (note to the people who do the hiring – and firing – at Microsoft: the Scripting Guys are never 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 ….). 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:
<html><SCRIPT Language=”VBScript”>
Sub CreateTable strHTML = “<table width=’100%’ border>”
For i = 1 to 11 x = i Mod 2 If x = 0 Then strHTML = strHTML & “<tr>” Else strHTML = strHTML & “<tr bgcolor=’lightgreen’>” End If strHTML = strHTML & “<td width=’100%’> </td>” strHTML = strHTML & “</tr>” Next
strHTML = strHTML & “</table>” TableArea.InnerHTML = strHTML End Sub
</SCRIPT>
<body> <input id=runbutton type=”button” value=”Create Table” name=”run_button” onClick=”CreateTable”><p> <span id=TableArea></span> </body>
</html>
What’s that? Explain how this all works? Sorry; we don’t have time for that. Besides, what are they going to do if we don’t explain how this all works: fire us?
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’s the portion of the HTA window where we’ll create our table.
Here’s what the <BODY> tag, in all its limited glory, looks like:
<body>
<input id=runbutton type=”button” value=”Create Table” name=”run_button” onClick=”CreateTable”><p>
<span id=TableArea></span>
</body>
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:
strHTML = “<table width=’100%’ border>”
Now comes the fun part. For demonstration purposes we’re 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:
For i = 1 to 11
We then have this unusual line of code:
x = i Mod 2
As it turns out, the Mod 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.
Why the heck would we do that? 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 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:
If x = 0 Then
Suppose we do 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:
strHTML = strHTML & “<tr>”
And if the remainder is not 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 parameter and set the background color of the row to lightgreen:
strHTML = strHTML & “<tr bgcolor=’lightgreen’>”
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’ll end up with alternating rows of green and white.
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   construction), then use the </tr> tag to close off the row:
strHTML = strHTML & “<td width=’100%’> </td>” strHTML = strHTML & “</tr>”
With row number 1 finished we then loop around and repeat the process until we’ve added 11 rows to our table. That brings us to these two lines of code:
strHTML = strHTML & “</table>” TableArea.InnerHTML = strHTML
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 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:
Which is pretty much what we wanted it to look like.
|
Note. Yes, we know: <SPAN> tags and InnerHTML properties; all that stuff can be terribly confusing if you’re 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. |
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’s easy to say “The Scripting Guys? Microsoft would never fire the Scripting Guys.” But that’s what they said about Clippy the Paperclip, too. If Microsoft is willing to fire Clippy, well, it’s hard to believe that anyone’s job could be safe around here. If you need us we’ll be in our office. Working.
Yes, yes: for once.
0 comments