Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Help with Javascript to highlight DataGrid items

Status
Not open for further replies.
supermatchgame

supermatchgame

Programmer
May 16, 2007
50
GB
Hi,

I got some javascript from a web page that highlights the different rows in a datagrid when I roll my mouse over them:

Code: 
<script language="javascript" type="text/javascript">
        startHighlight = function()
        {
            if (document.all && document.getElementById)
            {
                navRoot = document.getElementById("dgResults");
                tbody = navRoot.childNodes[0];
                for (i = 1; i < tbody.childNodes.length - 1; i++)
                {
                    node = tbody.childNodes[i];
                    if (node.nodeName == "TR")
                    {
                        node.onmouseover = function()
                        {
                            this.className = "over";
                        }
                        node.onmouseout = function()
                        {
                            this.className = this.className.replace("over", "");
                        }
                        node.onmousedown = function()
                        {
                            this.className = "under";
                        }
                    }
                }
            }
        }
        window.onload = startHighlight;
    </script>

The javascript makes reference to some CSS classes to decide what colour to make the row.

I want to make it so that when I click the mouse the row stays highlighted with another colour until I click another row. As you can see I have added
Code: 
node.onmousedown = function()
                        {
                            this.className = "under";
                        }
but while this highlights the row when I click on it, as soon as I roll my mouse over it the highlighting disappears.

I have never written javascript before - can anyone help me?

Thanks,

Mark.
 
Sort by date Sort by votes
Hi Dan,

No, this didn't work for me. I've kinda given up with the idea of highlighting the row (although it would be great) because I'm not too hot with Java and don't see how I can debug the script that I insert into the HTML of my page.

It annoys me that this is so difficult - I would have thought that this would be standard feature in the asp DataGrid but obviously not.

Thanks for your help,

Mark.
 
Upvote 0 Downvote
Hey, I modified your code a little but this seems like a simple way of doing it.
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>


<script language="javascript" type="text/javascript">
   var curRowClicked = null;

   function startHighlight(){
      var navRoot = document.getElementById("dgResults");
      var trArray = navRoot.getElementsByTagName('tr');

      for (i = 1; i < trArray.length - 1; i++) {
         node = trArray[i];

         node.onmouseover = function() {
            this.className = "over";
         }

         node.onmouseout = function() {
            if (this == curRowClicked)
               this.className = "under";
            else
               this.className = "";
         }

         node.onmousedown = function() {
            if ( curRowClicked )
               curRowClicked.className = "";
            curRowClicked = this;
            this.className = "under";
         }
      }
   }
  window.onload = startHighlight;
</script>
<style>
   .over {
      background-color:#33FF33;
   }

   .under {
      background-color:#FF3;
   }
</style>

</head>

<body >

   <table id="dgResults" border="1">
      <tr>
         <td>Some text in this column</td>
      </tr>
      <tr>
         <td>Some text in this column</td>
      </tr>
      <tr>
         <td>Some text in this column</td>
      </tr>
      <tr>
         <td>Some text in this column</td>
      </tr>
      <tr>
         <td>Some text in this column</td>
      </tr>
      <tr>
         <td>Some text in this column</td>
      </tr>
</body>
</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
347
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
768
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
182
Daniel K
Daniel K
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
324
JScannell
JScannell
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
416
Kennelbloke
Kennelbloke

Part and Inventory Search

Sponsor

Back
Top