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!

  • Congratulations strongm 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

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.
 
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.
 
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>
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top