Big bad DOM

Forums

My Profile

Inbox

Address Book

My Subscription

My Forums

Big bad DOM

Logged in as: Guest

arrSession:exec spGetSession 2,2,36435

	Active Users: There are 0 members and 0 guests.
	Users viewing this topic: none

Printable Version

All Forums >> [Scripting] >> WSH & Client Side VBScript >> Big bad DOM
Do you like VisualBasicScript.com? Link to us and help spread the word about our forum. Thanks!

Page: [1]

Message

<< Older Topic Newer Topic >>

Big bad DOM - 7/23/2006 10:05:45 PM

Sybre

Posts: 27
Score: 0
Joined: 7/19/2006
Status: offline

OK, this one's about using tables with the DOM...

I'm dynamically generating a table in my hta and I want to have the line which has been clicked highlight.
I can set the onClick for each row to call a function which does the highlighting but the problem is, I don't know how to identify which row called it.

eg
oRow.onClick = HighlightRow(Row Number)

in HighlightRow:
document.getelementbyid(sTable).rows(Row Number).style.backgroundcolor = "yellow"

I thought about having IDs for each row but the table needs to remain dynamic as the user will be adding and removing rows.
Any thoughts?

Post #: 1

RE: Big bad DOM - 7/24/2006 12:56:29 AM

ehvbs

Posts: 2169
Score: 50
Joined: 6/22/2005
From: Germany
Status: offline

Hi Sybre,

you can use "Me" to pass the current DOM TD element to a suitable event
handler sub. Something along the lines of:

<html>
  <head>
   <hta:application id = "medemo"
   />
   <title>starter</title>
   <meta http-equiv = "content-script-type" content = "text/vbscript"/>
   <script language = "VBScript"
           type     = "text/vbscript"
   >
 '<![CDATA[
 
 Option Explicit
 
 ''= refreshes the HTA page, which includes re-running any Windows_Onload code
 ' ============================================================================
 Sub reloadHTA()
   location.reload( True )
 End Sub
 
 ''= one-for-all handler used by all TDs to color mother row
 ' ============================================================================
 Sub onTDClick( oTD )
 ' start simple
 ' MsgBox "My value is '" + oTD.innerText + "'!"
 ' MsgBox "My parent's id is '" + oTD.parentNode.id + "'!"
 ' enhance later
   oTD.parentNode.style.backGroundColor = "yellow"
 End Sub
 
 ''=
 ' ============================================================================
 Sub onloadBody()
   Dim nRows : nRows = 5
   Dim nCols : nCols = 4
   Dim sHTML, nRow, nCol
   sHTML = "<table border = ""1"">"
   For nRow = 1 To nRows
      sHTML = sHTML + "<tr id = ""R" & nRow & """>"
       For nCol = 1 To nCols
 '         start simple
 '         sHTML = sHTML + "<td>R " & nRow & " - C " & nCol & "</td>"
 '         enhance later
           sHTML = sHTML + "<td onclick = ""onTDClick( Me )"">R " & nRow & " - C " & nCol & "</td>"
       Next
      sHTML = sHTML + "</tr>"
   Next
   sHTML = sHTML + "<table>"
   document.GetElementById( "divDisplay" ).innerHTML = sHTML
 End Sub
 
 ']]>
   </script>
  </head>
  <body onload = "onloadBody">
   <input type = "BUTTON" value = "reload" onclick = "reloadHTA()">
   <hr />
    <div id = "divDisplay">
    <div>
  </body>
 </html>

Good luck!

(in reply to Sybre)

Post #: 2

RE: Big bad DOM - 7/24/2006 1:30:24 AM

Sybre

Posts: 27
Score: 0
Joined: 7/19/2006
Status: offline

Brilliant - I had a feeling there should be something like that but couldn't for the life of me figure out what it was.
Thanks.

(in reply to ehvbs)

Post #: 3

RE: Big bad DOM - 8/3/2006 2:42:36 AM

Sybre

Posts: 27
Score: 0
Joined: 7/19/2006
Status: offline

Hmm, on further investigation it appears I can't seem to set the onclick for the row the way I want to....

Setting the onclick for the row/cell using HTML tags is fine but I'd really like generate the table without having to set the innerhtml of the div using sHTML = sHTML & "<TD onclick=""onTDClick( Me )"">"
I've been adding my rows/cells dynamically using something like this:

Set oRow = document.createElement("TR")
oTBody.appendChild(oRow)
set oCell = document.createElement("TD")
oRow.appendChild(oCell)

I thought I should be able to set the onclick properties before using appendChild by:
oCell.onClick = mySubroutine(sMyArgument)

or later by:
myCellID.onclick = mySubroutine(sMyArgument)

Neither of these work - can anyone tell me why and how I can do this?

(in reply to Sybre)

Post #: 4

RE: Big bad DOM - 8/3/2006 3:34:43 AM

ehvbs

Posts: 2169
Score: 50
Joined: 6/22/2005
From: Germany
Status: offline

Hi Sybre,

I don't think that this is possible. To set the onclick attribute you may use

oCell.setAttribute "onclick", GetRef( "onTDClick2" )

or

oCell.onclick = GetRef( "onTDClick2" )

where onTDClick2() is a Sub with no parameters. But I see no way to insert
the Me parameter when using this method.

Sorry about that!

ehvbs

(in reply to Sybre)

Post #: 5

RE: Big bad DOM - 8/3/2006 3:37:42 AM

Sybre

Posts: 27
Score: 0
Joined: 7/19/2006
Status: offline

Oh well, thanks anyway!

(in reply to ehvbs)

Post #: 6

RE: Big bad DOM - 8/3/2006 4:23:04 AM

ehvbs

Posts: 2169
Score: 50
Joined: 6/22/2005
From: Germany
Status: offline

Hi Sybre,

you may use DOM to create your table and pass Me (== this) to a 'one-for-all handler' -
but you'll have to use JScript:

<html>
  <head>
   <hta:application id = "medemoJS"
   />
   <title>starter</title>
   <meta http-equiv = "content-script-type" content = "text/jscript"/>
   <script language = "JScript"
           type     = "text/jscript"
   >
 //<![CDATA[
 
 ///= refreshes the HTA page, which includes re-running any Windows_Onload code
 // ============================================================================
 function reloadHTA()
 { location.reload( true );
 }
 
 ///= one-for-all handler used by all TDs to color mother row
 // ============================================================================
 function onTDClick( oTD )
 { // start simple
   // alert( "My value is '" + oTD.innerText + "'!" );
   // alert( "My parent's tag is '" + oTD.parentElement.tagName + "'!" );
   // enhance later
   oTD.parentElement.style.backgroundColor = "yellow";
 }
 
 ///=
 // ============================================================================
 
 function onloadBody()
 { // start simple
   // alert( "so weit, so gut!" );
   var nRows      = 5;
   var nCols      = 4;
   var divDisplay = document.getElementById( "divDisplay" );
   var oTable, oTBody, nRow, nCol, oRow, oCell;
 
   oTable = document.createElement( "table" );
   oTable.setAttribute( "border", "1" );
   oTBody = document.createElement( "tbody" );
   oTable.appendChild( oTBody );
 
   for( nRow = 1; nRow <= nRows; ++nRow )
      { oRow = document.createElement("TR");
        for( nCol = 1; nCol <= nCols; ++nCol )
           { oCell = document.createElement( "TD" );
             oCell.appendChild( document.createTextNode( "R " + nRow + " - C " + nCol ) );
             oCell.onclick = new Function( "onTDClick(this);" );
             oRow.appendChild( oCell )
           }
        oTBody.appendChild( oRow );
 
      }
   divDisplay.appendChild( oTable );
 }
 
 //]]>
   </script>
  </head>
  <body onload = "onloadBody()">
   <input type = "BUTTON" value = "reload" onclick = "reloadHTA()">
   <hr />
    <div id = "divDisplay">
    <div>
  </body>
 </html>

Good luck!

(in reply to Sybre)

Post #: 7

RE: Big bad DOM - 8/16/2006 12:40:39 AM

Sybre

Posts: 27
Score: 0
Joined: 7/19/2006
Status: offline

Aha - I've found a way to do it with vbscript....!
Although you can't pass parameters with getref, you can find out what triggered it using the event object (window.event).

The onclick event is assigned when the row is generated by:

   oRow.onclick = getref("RowClicked")

Then the element which caused the event can bereferenced in RowClicked using:

   window.event.srcElement

However....
This by itself actually references the cell not the row - so I stuck in an extra bit to work my way up to the row:

        Dim oThisElement
        Set oThisElement = window.event.srcElement
        Do Until oThisElement.tagName = "TR"
            Set oThisElement = oThisElement.parentElement
        Loop

I did it as a loop not just a single step up because some of my cells contain elements so if they are clicked on then I'd have to go up two levels etc.

(in reply to ehvbs)

Post #: 8

RE: Big bad DOM - 8/16/2006 1:04:41 AM

ehvbs

Posts: 2169
Score: 50
Joined: 6/22/2005
From: Germany
Status: offline

Hi Sybre,

because you found a VBScript way (congratulations!) where I saw only JScript,
I 'updated' my script using your ideas.

<html>
  <head>
   <hta:application id = "medemo2"
   />
   <title>medemo2</title>
   <meta http-equiv = "content-script-type" content = "text/vbscript"/>
   <script language = "VBScript"
           type     = "text/vbscript"
   >
 '<![CDATA[
 
 Option Explicit
 
 ''= refreshes the HTA page, which includes re-running any Windows_Onload code
 ' ============================================================================
 Sub reloadHTA()
   location.reload True
 End Sub
 
 ''= one-for-all handler used by TR to color itself
 ' ============================================================================
 Sub onTRClick()
   Dim oRow : Set oRow = window.event.srcElement.parentElement
   Do While "TR" <> oRow.tagName
      Set oRow = oRow.parentElement
   Loop
   If "yellow" = oRow.style.backGroundColor Then
      oRow.style.backGroundColor = "white"
   Else
      oRow.style.backGroundColor = "yellow"
   End If
 End Sub
 
 ''= creates table using DOM
 ' ============================================================================
 Sub onloadBody()
   Dim nRows      : nRows          = 5
   Dim nCols      : nCols          = 4
   Dim divDisplay : Set divDisplay = document.GetElementById( "divDisplay" )
   Dim fnTRClick  : Set fnTRClick  = GetRef( "onTRClick" )
   Dim oTable, oTBody, nRow, nCol, oRow, oCell
 
   Set oTable = document.createElement( "table" )
   oTable.setAttribute "border", "1"
   Set oTBody = document.createElement( "tbody" )
   oTable.appendChild oTBody
   For nRow = 1 To nRows
       Set oRow = document.createElement("TR")
       oRow.onclick = fnTRClick
       For nCol = 1 To nCols
           Set oCell = document.createElement("TD")
           oCell.appendChild document.createTextNode( "R " & nRow & " - C " & nCol )
           oRow.appendChild oCell
       Next
       oTBody.appendChild oRow
   Next
   divDisplay.appendChild oTable
 End Sub
 
 ']]>
   </script>
  </head>
  <body onload = "onloadBody">
   <input type = "BUTTON" value = "reload" onclick = "reloadHTA()">
   <hr />
    <div id = "divDisplay">
    <div>
  </body>
 </html>

Thanks for you persistency!

ehvbs

(in reply to Sybre)

Post #: 9

RE: Big bad DOM - 8/16/2006 1:10:59 AM

Sybre

Posts: 27
Score: 0
Joined: 7/19/2006
Status: offline

I did appreciate your JScript answer (put me on the right track for finding the vbscript way) - just was limited to using vbscript only (my boss's requirement)

(in reply to ehvbs)