Menu ▾ ▴

Highlight table rows

Help
Mr Rolle
2005-09-16
2012-10-09

  • Mr Rolle

    Mr Rolle - 2005-09-16

    Hi!

    Has anybody managed to highlight table rows on a mouse over event?

    In my old solution I used "mouseover" and "mouseout" event, but i need to get it to work with the Display Tag. I have tried a solution with:

    <STYLE TYPE="text/css">
    <!--
    tr:hover
    {
        background-color: rgb(153,153,204);
        text-decoration:  none; 
    }
    //-->
</style>

    That works with firefox, but not with IE. Does anybody have any suggestion on how to get highlight tablerows with the displaytag and internet exporer?

     

    • Matt Raible

      Matt Raible - 2005-09-16

      I use JavaScript to do this - note that this function will also make your rows clickable:

      function highlightTableRows(tableId) {
      var previousClass = null;
      var table = document.getElementById(tableId);
      var tbody = table.getElementsByTagName("tbody")[0];
      if (tbody == null) {
      var rows = table.getElementsByTagName("tr");
      } else {
      var rows = tbody.getElementsByTagName("tr");
      }
      // add event handlers so rows light up and are clickable
      for (i=0; i < rows.length; i++) {
      rows[i].onmouseover = function() { previousClass=this.className;this.className+=' over' };
      rows[i].onmouseout = function() { this.className=previousClass };
      rows[i].onclick = function() {
      var cell = this.getElementsByTagName("td")[0];
      var link = cell.getElementsByTagName("a")[0];
      location.href = link.getAttribute("href");
      this.style.cursor="wait";
      }
      }
      }

       

Log in to post a comment.