TechNet Home > Script Center > Learn to Script

The Scripting Week 3 Giveaway

Hidden Page No. 4

Sorry. Unfortunately, the deadline for the final Scripting Week Challenge has already passed. But there’s still at least some reward: on this page you’ll find some kick-it-up-a-notch content that won’t be presented during the Scripting Week 3 webcasts.

*

Add a Little Spice to Your HTML Tables

One of the great things about using HTML as a way to display output is the fact that it’s very easy to create tables in HTML, far easier than trying to get table-like output in the command window.

And that’s great … at first. After awhile, though, tables begin to get a little boring. For example, here’s a sample HTA that has gone out, retrieved some data, and then displayed that data in a table:

HTML Table


Excuse us while we yawn. There’s nothing wrong with this HTA; it just doesn’t fit the theme of being kicked up a notch. You know what would be cool? What if, as you ran your mouse over the rows in the table, the current row “lit up” like this:

HTML Table


You’re right: that would be cool. And here’s a simple little script that shows you how to do that:

<html>

<SCRIPT LANGUAGE="VBScript">

   Sub AddColor
     Set x = window.event.srcElement
     Set y = x.parentElement
     y.bgcolor="peachpuff"
    End Sub

   Sub RemoveColor
     Set x = window.event.srcElement
     Set y = x.parentElement
     y.bgcolor="white"
    End Sub
 
</SCRIPT>

<body>

<table width="100%" id="table1">
    <tr onmouseover="AddColor" onmouseout="RemoveColor">
        <td>Ken Myer</td><td>Finance</td>
    </tr>
    <tr onmouseover="AddColor" onmouseout="RemoveColor">
        <td>Pilar Ackerman</td><td>Research and Development</td>
    </tr>
    <tr onmouseover="AddColor" onmouseout="RemoveColor">
        <td>Gail Erickson</td><td>Manufacturing</td>
    </tr>
    <tr onmouseover="AddColor" onmouseout="RemoveColor">
        <td>Jonathan Haas</td><td>Sales</td>
    </tr>
</table>

</body>
</html>

As you can see, this is a pretty simple document: it consists entirely of a two-column, four-row table and a pair of scripts. Before we delve into the scripts, let’s take a look at one of the table rows:

<tr onmouseover="AddColor" onmouseout="RemoveColor">
    <td>Ken Myer</td><td>Finance</td>
</tr>

You’re right: with the exception of the onmouseover and onmouseout events this is just a regular old table. As you might expect, though, it’s those two events that spice things up a bit. Each time the mouse passes over this row in the table the onmouseover event will call the subroutine AddColor; each time the mouse exits the row, the onmouseout event calls the subroutine RemoveColor. That’s how we get the rows to change color as we scroll over them.

The AddColor subroutine has only 3 lines of code, though a couple of those lines might look a little strange to you:

Sub AddColor
    Set x = window.event.srcElement
    Set y = x.parentElement
    y.bgcolor="peachpuff"
End Sub

Here’s the deal. When an object – like a table row – fires an event, the HTML document knows who was responsible for triggering that event; that information is stored in the srcElement property of the event. The first line of code in our subroutine simply creates an object reference (cleverly named x) to the item that called the AddColor subroutine:

Set x = window.event.srcElement

That’s pretty easy. There is one minor catch, however. Technically, the element that triggered the event and called the AddColor subroutine is not the table row; instead, it’s the specific cell within the row that we passed the mouse over. Who cares about that? Well, believe it or not, you do. The AddColor subroutine is going to change the color of an object as the mouse passes over it. If we change the color of the srcElement object all we’re going to do is change an individual cell in the table:

HTML Table


Not really what we had in mind. That’s what our second line of code is for:

Set y = x.parentElement

What we’re doing here is creating a second object reference, this one to the cell’s parentElement. As you might expect, the parentElement of a table cell is a table row; by changing the color of the parentElement we’ll end up changing the color of the entire row. And that’s exactly what we do here:

y.bgcolor="peachpuff"

Note. Yes, for years now we’ve been looking for an excuse to use the word “peachpuff” in one of our articles.

Our second subroutine – RemoveColor – simply sets the background color of the row to white, which has the visual effect of “removing” the color.

Not bad, not bad at all. But let’s kick this table up one more notch. As you can see from the example, our current table displays only a minimal amount of data about each user. But, to be honest, we can’t really display much more than that anyway. For example, each user account in Active Directory has over 200 attributes associated with it. If we tried to display all the attributes of all our user accounts in a single HTA or Web page, well ….

But as we’re browsing through our table we might want to retrieve additional information about a particular user. Ideally, we could simply click a row in the table and a secondary window would pop up with all that extra information. This is neither the time nor the place to talk about searching Active Directory and retrieving attribute values, but we’ll at least show you the first step in the process: figuring out which user we want to search for.

On the surface, that would seem pretty easy: after all, the name of the user is in the first cell of each row; all we have to do is determine that value and we’re in business. And that’s true, provided that you click on the cell containing the user name. But what if you click on a different cell in that row? What then? What are we supposed to do if that happens?

Sorry: we didn’t mean to scare you. Actually, this is fairly easy, too: we just have to be a little clever about how we get the value of the first cell in the clicked-on row.

To do this we need to add a new subroutine (ShowValue) and modify our table row definition:

<tr onmouseover="AddColor" onmouseout="RemoveColor" onclick="ShowValue">

As you can see, we’ve added a third event – onclick – to the parameter set: each time someone clicks on the row we’ll call the ShowValue subroutine.

In turn, ShowValue looks like this:

Sub ShowValue
    Set x = window.event.srcElement
    Set y = x.parentElement
    Msgbox y.cells(0).InnerText
End Sub

The first two lines of code are identical to our other subroutines: all we’re really doing here is creating an object reference to the table row. What we want to do next is reference the InnerText value of the first cell in that row, the cell containing the user name. That sounds tricky, but it’s not. That’s because each row has a collection consisting of all the cells in that row, and each cell is assigned a unique index number; the first cell in the row is cell 0, the second cell is cell 1, etc. To echo back the InnerText value (that’s the value of the text itself, with any HTML formatting stripped away) of the first cell in the row we use this code:

Msgbox y.cells(0).InnerText

The variable y, of course, represents the table row, and Cells(0) refers to the first cell in the row. If we wanted to get at the value of the second cell in each row we’d use this code:

Msgbox y.cells(1).InnerText

And so on.

All we’re doing is displaying the value in a message box, but in a full-fledged production script you could pass that value to a subroutine that could then search Active Directory for the user and pop up a second window filled to the brim with information about that user.

Let’s make one last little addition and then call it good. By default, any time the mouse passes over a table the cursor changes to an I-beam, implying that you can edit the text in that table. But we don’t want an I-beam; instead, we’d rather have a pointing hand, signifying that you can click on the table and have something happen. That’s a nice little addition, and to make it all we have to do is add one little piece to our table definition:

<table width="100%" id="table1" style="cursor:hand">

That’s it: just add the parameter style="cursor:hand" and you’re done.

And just in case you’re interested, here’s the complete code for our highlighting, clickable table:

<html>

<SCRIPT LANGUAGE="VBScript">

    Sub AddColor
        Set x = window.event.srcElement
        Set y = x.parentElement
        y.bgcolor="peachpuff"
     End Sub

    Sub RemoveColor
        Set x = window.event.srcElement
        Set y = x.parentElement
        y.bgcolor="white"
     End Sub
    
     Sub ShowValue
        Set x = window.event.srcElement
        Set y = x.parentElement
        Msgbox y.cells(0).InnerText
     End Sub         

</SCRIPT>

<body>

<table width="100%" id="table1" style="cursor:hand">
    <tr onmouseover="AddColor" onmouseout="RemoveColor" onclick="ShowValue">
        <td>Ken Myer</td><td>Finance</td>
    </tr>
    <tr onmouseover="AddColor" onmouseout="RemoveColor" onclick="ShowValue">
        <td>Pilar Ackerman</td><td>Research and Development</td>
    </tr>
    <tr onmouseover="AddColor" onmouseout="RemoveColor" onclick="ShowValue">
        <td>Gail Erickson</td><td>Manufacturing</td>
    </tr>
    <tr onmouseover="AddColor" onmouseout="RemoveColor" onclick="ShowValue">
        <td>Jonathan Haas</td><td>Sales</td>
    </tr>
</table>

</body>
</html>

Top of pageTop of page