Javascript code works only when CSS file is removed

Question

eburlea 23 Junior Poster

12 Years Ago

Hi. I have a javascript code inserted before closing tag </body> that is meant to change the color of a table row when the mouse is placed over it. It works only when I remove the css file. Please advise what is the problem, I need them working together. The Javascript code is as follows:

html-css javascript

3 Contributors
10 Replies
217 Views
1 Day Discussion Span
Latest Post 12 Years Ago Latest Post by eburlea

dcdruck 11 Light Poster

12 Years Ago

Can you post the CSS code and the relevant HTML for the table? Maybe you have a CSS rule that's overriding what you're trying to do in JavaScript.

dcdruck 11 Light Poster

12 Years Ago

It's probably because your table cells in the league_stands table all have either blue-even, blue-odd, or blue-header as CSS classes. All of those classes provide background-colors that are probably overriding your JavaScript. Maybe what you should could try instead is create a new CSS class for the hover state and apply that to the row and cells via JavaScript instead of directly applying a background color. What I mean is something like this:

CSS:

/* CSS */
league-stands-active {
    background-color: #FF0000;
}

HTML/JavaScript:

<script>
var myTable = document.getElementById("leagues_stands");
var rows = myTable.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
    rows[i].onmouseover = function() {
        // add the CSS class
        this.className += ' league-stands-active';
    };
    rows[i].onmouseout = function() {
        // remove the CSS class
        this.className = this.className.replace(/league-stands-active/,'');
    };
}
</script>

Troy III 272 Posting Pro

12 Years Ago

are you sure you've saved your files in utf-8 charset format since you are so eager in instructing the interpreter what chaset is to be used when parsing your content?

Edited 12 Years Ago by Troy III

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

eburlea 23 Junior Poster · Answer 1 · 2012-10-18T16:09:02+00:00

<script>
var myTable = document.getElementById("leagues_stands");
var rows = myTable.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
    rows[i].onmouseover = function() {
        this.style.backgroundColor = "#FF0000";
    };
    rows[i].onmouseout = function() {
        this.style.backgroundColor = "#FFFFFF";
    };
}
</script>

eburlea 23 Junior Poster · Answer 2 · 2012-10-18T17:12:53+00:00

<?php
include ("blocks/db.php");
$result0 = mysql_query ("SELECT * FROM settings WHERE page='index'",$db);
$myrow0 = mysql_fetch_array ($result0);
if (isset($_GET['season'])) {$season = $_GET['season'];}
if (isset($_GET['s_type'])) {$s_type = $_GET['s_type'];}
if (isset($_GET['page'])) {$page = $_GET['page'];}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="<?php echo $myrow0['meta_d']; ?>" />
<meta name="keywords" content="<?php echo $myrow0['meta_k']; ?>" />
<title><?php echo $myrow0['title']; ?></title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table id="main_table" align="center" border="0px" cellpadding="0px" cellspacing="0px">
  <?php include ("blocks/header.php"); ?>
  <tr>
    <?php include ("blocks/left.php"); ?>
    <td id="center" class="white">
<?php
echo $myrow0['text_up'];
echo '<form name="form1" id="select_form" method="get" action="index.php">';
/* Creating a drop-down list to select the season */
echo '<label><select name="season">';
$result1 = mysql_query ("SELECT DISTINCT season FROM competitions WHERE status='Active' ORDER BY season DESC",$db);
while ($myrow1 = mysql_fetch_array($result1))
  {
  if (strlen($myrow1['season']) == 4)
    {
    $season_short = intval($myrow1['season'])+1;
    $season_long = $myrow1['season'].'-'.$season_short;
    $result2 = mysql_query ("SELECT DISTINCT season FROM competitions WHERE status='Active' && season='$season_long'",$db);
    if (mysql_num_rows($result2) == FALSE)
      {
      if (isset($season) && $season==$season_long)
        {
        echo '<option selected value="'.$season_long.'">'.$season_long.'</option>';
        }
      else
        {
        echo '<option value="'.$season_long.'">'.$season_long.'</option>';
        }
      }
    }
  else
    {
    if (isset($season) && $season==$myrow1['season'])
      {
      echo '<option selected value="'.$myrow1['season'].'">'.$myrow1['season'].'</option>';
      }
    else
      {
      echo '<option value="'.$myrow1['season'].'">'.$myrow1['season'].'</option>';
      }
    }
  }
echo '</select> </label>';
/* Creating a drop-down list to select the type of statistics */
echo '<label><select name="s_type">';
if (isset($s_type) && $s_type=='Home Win') {echo '<option selected value="Home Win">Home Win</option>';} else {echo '<option value="Home Win">Home Win</option>';}
if (isset($s_type) && $s_type=='Draw') {echo '<option selected value="Draw">Draw</option>';} else {echo '<option value="Draw">Draw</option>';}
if (isset($s_type) && $s_type=='Away Win') {echo '<option selected value="Away Win">Away Win</option>';} else {echo '<option value="Away Win">Away Win</option>';}
if (isset($s_type) && $s_type=='Under 0.5 Goals') {echo '<option selected value="Under 0.5 Goals">Under 0.5 Goals</option>';} else {echo '<option value="Under 0.5 Goals">Under 0.5 Goals</option>';}
if (isset($s_type) && $s_type=='Under 1.5 Goals') {echo '<option selected value="Under 1.5 Goals">Under 1.5 Goals</option>';} else {echo '<option value="Under 1.5 Goals">Under 1.5 Goals</option>';}
if (isset($s_type) && $s_type=='Under 2.5 Goals') {echo '<option selected value="Under 2.5 Goals">Under 2.5 Goals</option>';} else {echo '<option value="Under 2.5 Goals">Under 2.5 Goals</option>';}
if (isset($s_type) && $s_type=='Over 0.5 Goals') {echo '<option selected value="Over 0.5 Goals">Over 0.5 Goals</option>';} else {echo '<option value="Over 0.5 Goals">Over 0.5 Goals</option>';}
if (isset($s_type) && $s_type=='Over 1.5 Goals') {echo '<option selected value="Over 1.5 Goals">Over 1.5 Goals</option>';} else {echo '<option value="Over 1.5 Goals">Over 1.5 Goals</option>';}
if (isset($s_type) && $s_type!='Over 2.5 Goals') {echo '<option value="Over 2.5 Goals">Over 2.5 Goals</option>';} else {echo '<option selected value="Over 2.5 Goals">Over 2.5 Goals</option>';}
echo '</select></label>';
echo '<label><input type="submit" name="submit" id="submit1" value="Show!" /></label>';
echo '</form>';
/* Creating a table for the second Menu Bar */
echo '<table id="menubar2" align="center" border="0px" cellpadding="0px" cellspacing="0px">';
  echo '<tr>';
    echo '<td id="cell1" class="blue_mb_light"><a href="index.php?'; if(isset($season) && isset($s_type)) {echo 'season='.$season.'&&s_type='.$s_type.'"';} else {echo 'season=2012-2013&&s_type=Over+2.5+Goals"';} echo '>Full Time</a></td>';
    echo '<td id="cell2" class="white"></td>';
    echo '<td id="cell1" class="blue_mb_dark"><a href="index_1.php?'; if(isset($season) && isset($s_type)) {echo 'season='.$season.'&&s_type='.$s_type.'"';} else {echo 'season=2012-2013&&s_type=Over+2.5+Goals"';} echo '>Half 1</a></td>';
    echo '<td id="cell2" class="white"></td>';
    echo '<td id="cell1" class="blue_mb_dark"><a href="index_2.php?'; if(isset($season) && isset($s_type)) {echo 'season='.$season.'&&s_type='.$s_type.'"';} else {echo 'season=2012-2013&&s_type=Over+2.5+Goals"';} echo '>Half 2</a></td>';
    echo '<td id="cell2" class="white"></td>';
    echo '<td id="cell1" class="white"></td>';
    echo '<td id="cell2" class="white"></td>';
    echo '<td id="cell1" class="white"></td>';
    echo '<td id="cell2" class="white"></td>';
    echo '<td id="cell1" class="white"></td>';
    echo '<td id="cell2" class="white"></td>';
    echo '<td id="cell1" class="white"></td>';
    echo '<td id="cell2" class="white"></td>';
    echo '<td id="cell1" class="white"></td>';
    echo '<td id="cell2" class="white"></td>';
    echo '<td id="cell1" class="white"></td>';
  echo '</tr>';
  echo '<tr>';
    echo '<td id="cell3" class="blue_mb_light"></td>';
    echo '<td id="cell4" class="white"></td>';
    echo '<td id="cell3" class="white"></td>';
    echo '<td id="cell4" class="white"></td>';
    echo '<td id="cell3" class="white"></td>';
    echo '<td id="cell4" class="white"></td>';
    echo '<td id="cell3" class="white"></td>';
    echo '<td id="cell4" class="white"></td>';
    echo '<td id="cell3" class="white"></td>';
    echo '<td id="cell4" class="white"></td>';
    echo '<td id="cell3" class="white"></td>';
    echo '<td id="cell4" class="white"></td>';
    echo '<td id="cell3" class="white"></td>';
    echo '<td id="cell4" class="white"></td>';
    echo '<td id="cell3" class="white"></td>';
    echo '<td id="cell4" class="white"></td>';
    echo '<td id="cell3" class="white"></td>';
  echo '</tr>';
  echo '<tr>';
    echo '<td id="cell1" class="blue_mb_light"></td>';
    echo '<td id="cell2" class="blue_mb_light"></td>';
    echo '<td id="cell1" class="blue_mb_light"></td>';
    echo '<td id="cell2" class="blue_mb_light"></td>';
    echo '<td id="cell1" class="blue_mb_light"></td>';
    echo '<td id="cell2" class="blue_mb_light"></td>';
    echo '<td id="cell1" class="blue_mb_light"></td>';
    echo '<td id="cell2" class="blue_mb_light"></td>';
    echo '<td id="cell1" class="blue_mb_light"></td>';
    echo '<td id="cell2" class="blue_mb_light"></td>';
    echo '<td id="cell1" class="blue_mb_light"></td>';
    echo '<td id="cell2" class="blue_mb_light"></td>';
    echo '<td id="cell1" class="blue_mb_light"></td>';
    echo '<td id="cell2" class="blue_mb_light"></td>';
    echo '<td id="cell1" class="blue_mb_light"></td>';
    echo '<td id="cell2" class="blue_mb_light"></td>';
    echo '<td id="cell1" class="blue_mb_light"></td>';
  echo '</tr>';
  echo '<tr>';
    echo '<td colspan="17" id="cell5" class="blue_odd"><br />';
    $result3 = mysql_query ("SELECT season FROM competitions ORDER BY season DESC",$db);
    $myrow3 = mysql_fetch_array ($result3);
    if (strlen($myrow3['season']) == 4)
      {
      $season_short = intval($myrow3['season'])+1;
      $season_long = $myrow3['season'].'-'.$season_short;   
      }
    else
      {
      $season_long = $myrow3['season'];
      }
    echo '<p>Top Twenty Leagues '; if(isset($season)){echo $season;} else {echo $season_long;} echo '</p>';   
$association = array();
$league = array();
$s = array();
$var = array();
/* Checking if $season and $s_type are set */
if (isset($season) && isset($s_type))
  {
  $season_short = substr($season,0,4);
/* Checking if $s_type is 'Home Win' */
  if ($s_type == 'Home Win')
    {
    $result = mysql_query ("SELECT association,name,season,hw_ft FROM competitions WHERE status='Active' && (season='$season' || season='$season_short') ORDER BY hw_ft DESC LIMIT 20",$db);
    while ($myrow = mysql_fetch_array($result))
      {
      $association[] = $myrow['association'];
      $league[] = $myrow['name'];
      $s[] = $myrow['season'];
      $var[] = $myrow['hw_ft'];
      }
    }
/* Checking if $s_type is 'Draw' */
  if ($s_type == 'Draw')
    {
    $result = mysql_query ("SELECT association,name,season,d_ft FROM competitions WHERE status='Active' && (season='$season' || season='$season_short') ORDER BY d_ft DESC LIMIT 20",$db);
    while ($myrow = mysql_fetch_array($result))
      {
      $association[] = $myrow['association'];
      $league[] = $myrow['name'];
      $s[] = $myrow['season'];
      $var[] = $myrow['d_ft'];
      }
    }
/* Checking if $s_type is 'Away Win' */
  if ($s_type == 'Away Win')
    {
    $result = mysql_query ("SELECT association,name,season,aw_ft FROM competitions WHERE status='Active' && (season='$season' || season='$season_short') ORDER BY aw_ft DESC LIMIT 20",$db);
    while ($myrow = mysql_fetch_array($result))
      {
      $association[] = $myrow['association'];
      $league[] = $myrow['name'];
      $s[] = $myrow['season'];
      $var[] = $myrow['aw_ft'];
      }
    }
/* Checking if $s_type is 'Under 0.5 Goals' */
  if ($s_type == 'Under 0.5 Goals')
    {
    $result = mysql_query ("SELECT association,name,season,u05_ft FROM competitions WHERE status='Active' && (season='$season' || season='$season_short') ORDER BY u05_ft DESC LIMIT 20",$db);
    while ($myrow = mysql_fetch_array($result))
      {
      $association[] = $myrow['association'];
      $league[] = $myrow['name'];
      $s[] = $myrow['season'];
      $var[] = $myrow['u05_ft'];
      }
    }
/* Checking if $s_type is 'Under 1.5 Goals' */
  if ($s_type == 'Under 1.5 Goals')
    {
    $result = mysql_query ("SELECT association,name,season,u15_ft FROM competitions WHERE status='Active' && (season='$season' || season='$season_short') ORDER BY u15_ft DESC LIMIT 20",$db);
    while ($myrow = mysql_fetch_array($result))
      {
      $association[] = $myrow['association'];
      $league[] = $myrow['name'];
      $s[] = $myrow['season'];
      $var[] = $myrow['u15_ft'];
      }
    }
/* Checking if $s_type is 'Under 2.5 Goals' */
  if ($s_type == 'Under 2.5 Goals')
    {
    $result = mysql_query ("SELECT association,name,season,u25_ft FROM competitions WHERE status='Active' && (season='$season' || season='$season_short') ORDER BY u25_ft DESC LIMIT 20",$db);
    while ($myrow = mysql_fetch_array($result))
      {
      $association[] = $myrow['association'];
      $league[] = $myrow['name'];
      $s[] = $myrow['season'];
      $var[] = $myrow['u25_ft'];
      }
    }
/* Checking if $s_type is 'Over 0.5 Goals' */
  if ($s_type == 'Over 0.5 Goals')
    {
    $result = mysql_query ("SELECT association,name,season,o05_ft FROM competitions WHERE status='Active' && (season='$season' || season='$season_short') ORDER BY o05_ft DESC LIMIT 20",$db);
    while ($myrow = mysql_fetch_array($result))
      {
      $association[] = $myrow['association'];
      $league[] = $myrow['name'];
      $s[] = $myrow['season'];
      $var[] = $myrow['o05_ft'];
      }
    }
/* Checking if $s_type is 'Over 1.5 Goals' */
  if ($s_type == 'Over 1.5 Goals')
    {
    $result = mysql_query ("SELECT association,name,season,o15_ft FROM competitions WHERE status='Active' && (season='$season' || season='$season_short') ORDER BY o15_ft DESC LIMIT 20",$db);
    while ($myrow = mysql_fetch_array($result))
      {
      $association[] = $myrow['association'];
      $league[] = $myrow['name'];
      $s[] = $myrow['season'];
      $var[] = $myrow['o15_ft'];
      }
    }
/* Checking if $s_type is 'Over 2.5 Goals' */
  if ($s_type == 'Over 2.5 Goals')
    {
    $result = mysql_query ("SELECT association,name,season,o25_ft FROM competitions WHERE status='Active' && (season='$season' || season='$season_short') ORDER BY o25_ft DESC LIMIT 20",$db);
    while ($myrow = mysql_fetch_array($result))
      {
      $association[] = $myrow['association'];
      $league[] = $myrow['name'];
      $s[] = $myrow['season'];
      $var[] = $myrow['o25_ft'];
      }
    }
/* Creating the table for leagues statistics */
echo '<p>Full Time '.$s_type.'</p>';
  echo '<table id="leagues_stands">';
    echo '<tr>';
      echo '<td id="s" class="blue_header">#</td>';
      echo '<td id="xl_header" class="blue_header">League</td>';
      echo '<td id="m" class="blue_header">%</td>';
    echo '</tr>';
  $i = 0;
  $n = 1;
  while (isset($var[$i]))
    {
    echo '<tr>';
      echo '<td id="s" class="blue_odd">'.$n.'</td>';
      echo '<td id="xl_body" class="blue_odd"><a href="overview.php?association='.$association[$i].'&&competition='.$league[$i].'&&season='.$s[$i].'">'.$association[$i].' '.$league[$i].'</a></td>';
      echo '<td id="m" class="blue_odd">'.number_format($var[$i],1).'%</td>';
    echo '<tr>';
    $i++;
    $n++;
    if (isset($var[$i]))
      {
      echo '<tr>';
        echo '<td id="s" class="blue_even">'.$n.'</td>';
        echo '<td id="xl_body" class="blue_even"><a href="overview.php?association='.$association[$i].'&&competition='.$league[$i].'&&season='.$s[$i].'">'.$association[$i].' '.$league[$i].'</a></td>';
        echo '<td id="m" class="blue_even">'.number_format($var[$i],1).'%</td>';
      echo '<tr>';
      $i++;
      $n++;
      }
    }
echo '</table>';
  }
else
  {
/* Taking from the DataBase the most recent season */
  $result = mysql_query ("SELECT season FROM competitions ORDER BY season DESC",$db);
  $myrow = mysql_fetch_array ($result);
  if (strlen($myrow['season']) == 4)
    {
    $season_short = $myrow['season'];
    $season_short2 = intval($myrow['season'])+1;
    $season = $myrow['season'].'-'.$season_short2;
    }
  else
    {
    $season_short = substr($myrow['season'],0,4);
    $season = $myrow['season'];
    }
  $result = mysql_query ("SELECT association,name,season,o25_ft FROM competitions WHERE status='Active' && (season='$season' || season='$season_short') ORDER BY o25_ft DESC LIMIT 20",$db);
  while ($myrow = mysql_fetch_array($result))
    {
    $association[] = $myrow['association'];
    $league[] = $myrow['name'];
    $s[] = $myrow['season'];
    $var[] = $myrow['o25_ft'];
    }
/* Creating the table for leagues statistics */
  echo '<p>Full Time Over 2.5 Goals</p>';
  echo '<table id="leagues_stands">';
    echo '<tr>';
      echo '<td id="s" class="blue_header">#</td>';
      echo '<td id="xl_header" class="blue_header">League</td>';
      echo '<td id="m" class="blue_header">%</td>';
    echo '</tr>';
  $i = 0;
  $n = 1;
  while (isset($var[$i]))
    {
    echo '<tr>';
      echo '<td id="s" class="blue_odd">'.$n.'</td>';
      echo '<td id="xl_body" class="blue_odd"><a href="overview.php?association='.$association[$i].'&&competition='.$league[$i].'&&season='.$s[$i].'">'.$association[$i].' '.$league[$i].'</a></td>';
      echo '<td id="m" class="blue_odd">'.number_format($var[$i],1).'%</td>';
    echo '</tr>';
    $i++;
    $n++;
    if (isset($var[$i]))
      {
      echo '<tr>';
        echo '<td id="s" class="blue_even">'.$n.'</td>';
        echo '<td id="xl_body" class="blue_even"><a href="overview.php?association='.$association[$i].'&&competition='.$league[$i].'&&season='.$s[$i].'">'.$association[$i].' '.$league[$i].'</a></td>';
        echo '<td id="m" class="blue_even">'.number_format($var[$i],1).'%</td>';
      echo '</tr>';
      $i++;
      $n++;
      }
    }
  echo '</table>';
  } 
  echo '</td>';
  echo '</tr>';
echo '</table>';
?>
    </td>
    <?php include ("blocks/right.php"); ?>
  </tr>
  <tr>
    <?php include ("blocks/footer.php"); ?>
  </tr>
</table>
<script>
var myTable = document.getElementById("leagues_stands");
var rows = myTable.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
    rows[i].onmouseover = function() {
        this.style.backgroundColor = "#FF0000";
    };
    rows[i].onmouseout = function() {
        this.style.backgroundColor = "#FFFFFF";
    };
}
</script>
</body>
</html>

eburlea 23 Junior Poster · Answer 3 · 2012-10-18T17:16:23+00:00

@charset "utf-8";
/* CSS Document */

html, body {margin:0; height:100%;}
p {font-family:Verdana; font-size:12px; color:#000088; margin:5px;}
li {font-family:Verdana; font-size:12px; color:#000088; margin-left:25px;}

#main_table{width:1048px; height:100%; border-collapse:collapse;}
#center{width:718px; vertical-align:top; border-bottom:1px solid #0000CC;}
#left {border-left:1px solid #0000CC; border-bottom:1px solid #0000CC;}
#right {border-right:1px solid #0000CC; border-bottom:1px solid #0000CC;}

#menubar_a{padding:3px; padding-left:7px; margin:0; white-space:nowrap; list-style-type:none; height:25px; border-left:1px solid #0000CC;}
#menubar_a a{font:bold 12px Verdana; color:#FFFFFF; padding:3px; text-decoration:none;}
#menubar_b{padding:3px; margin:0; white-space:nowrap; list-style-type:none; height:25px; border-right:1px solid #0000CC;}
#menubar_b span{font:bold 12px Verdana; color:#FFFFFF; float:right; margin-right:3px;}

#menu{margin-top:10px; margin-left:5px; margin-right:5px;}
#menu a{font:bold 12px Verdana; color:#000088; text-decoration:none;}
#menu a:hover{color:#AA00AA; text-decoration:underline;}

#select_form {margin-left:5px; margin-top:10px; margin-bottom:10px;}
#select_form select {font:12px Verdana; color:#000088; margin-right:5px;}
#submit1 {font:12px Verdana; color:#000088;}

#menubar2 {width:718px; border-collapse:collapse;}

#cell1 {width:78px; height:20px; text-align:center;}
#cell2 {width:2px; height:20px; text-align:center;}
#cell3 {width:78px; height:2px; text-align:center;}
#cell4 {width:2px; height:2px; text-align:center;}
#cell5 {vertical-align:top; text-align:center; height:1000px;}
#cell5 p {font:bold 14px Verdana; color:#000088;}
#cell6 {background-color:#9FEEEE; border:1px solid #008ED1; font:12px Verdana; color:#000088; text-align:center; padding:2px;}
#cell7 {background-color:#CCFFFF;}

.blue_mb_dark {background-color:#0000CC;}
.blue_mb_dark a {font:bold 12px Verdana; color:#FFFFFF; text-decoration:none;}
.blue_mb_light {background-color:#0033FF;}
.blue_mb_light a {font:bold 12px Verdana; color:#FFFFFF; text-decoration:none;}
a.small {font:11px Verdana; color:#FFFFFF; text-decoration:none;}
.blue_header {background-color:#008ED1; font:bold 12px Verdana; color:#FFFFFF; text-decoration:none; padding:2px;}
.blue_odd {background-color:#CCFFFF; font:12px Verdana; color:#000088; text-decoration:none; padding:2px;}
.blue_odd table {margin-left:auto; margin-right:auto;}
.blue_even {background-color:#9FEEEE; font:12px Verdana; color:#000088; text-decoration:none; padding:2px;}
.maroon_header {background-color:#500000; font:bold 12px Verdana; color:#FFFFFF; text-decoration:none; padding:2px;}
.maroon_odd {background-color:#E9B67A; font:12px Verdana; color:#300000; text-decoration:none; padding:2px;}
.maroon_even {background-color:#E9967A; font:12px Verdana; color:#300000; text-decoration:none; padding:2px;}
.green_header {background-color:#006000; font:bold 12px Verdana; color:#FFFFFF; text-decoration:none; padding:2px;}
.green_odd {background-color:#96FF66; font:12px Verdana; color:#003000; text-decoration:none; padding:2px;}
.green_even {background-color:#56FF66; font:12px Verdana; color:#003000; text-decoration:none; padding:2px;}
.white {background-color:#FFFFFF;}

.myicon {border:0; border-style:none;}
.h2h {width:180px;}

#xs {width:40px;}
#xs0 {text-align:left; padding-left:5px;}
#s {width:60px;}
#m {width:90px;}
#l_header {width:135px;}
#l_body {width:135px; text-align:left; padding-left:5px;}
#l2_header {width:220px;}
#l2_body {width:220px; text-align:left; padding-left:5px;}
#xl_header {width:320px;}
#xl_body {width:320px; text-align:left; padding-left:5px;}
#xl_body a {font:12px Verdana; color:#000088; text-decoration:none;}
#xl_body a:hover{color:#AA00AA;}
#xl2_header {width:280px;}
#xl2_body {width:280px; text-align:left; padding-left:5px;} 

#leagues_stands {width:470px; margin-top:5px; border-width: 1px 0 0 1px; border-spacing:0; border-collapse:collapse; border-style:solid; border-color:#00AED1;}
#leagues_stands td {border-width: 0 1px 1px 0; border-style:solid; border-color:#00AED1;}
#fixtures {width:470px; margin-top:5px; border-width: 1px 0 0 1px; border-spacing:0; border-collapse:collapse; border-style:solid; border-color:#00AED1;}
#fixtures td {border-width: 0 1px 1px 0; border-style:solid; border-color:#00AED1;}
#standings {width:505px; margin-top:5px; border-width: 1px 0 0 1px; border-spacing:0; border-collapse:collapse; border-style:solid; border-color:#900000;}
#standings td {border-width: 0 1px 1px 0; border-style:solid; border-color:#900000;}
#standings_form {margin-top:5px; border-width: 1px 0 0 1px; border-spacing:0; border-collapse:collapse; border-style:solid; border-color:#900000;}
#standings_form td {border-width: 0 1px 1px 0; border-style:solid; border-color:#900000;}
#results {width:560px; margin-top:5px; border-width: 1px 0 0 1px; border-spacing:0; border-collapse:collapse; border-style:solid; border-color:#00AED1;}
#results td {border-width: 0 1px 1px 0; border-style:solid; border-color:#00AED1;}
#three_way {width:480px; margin-top:5px; border-width: 1px 0 0 1px; border-spacing:0; border-collapse:collapse; border-style:solid; border-color:#06FF66;}
#three_way td {border-width: 0 1px 1px 0; border-style:solid; border-color:#06FF66;}
#under_over {width:340px; margin-top:5px; border-width: 1px 0 0 1px; border-spacing:0; border-collapse:collapse; border-style:solid; border-color:#06FF66;}
#under_over td {border-width: 0 1px 1px 0; border-style:solid; border-color:#06FF66;}
#h2h {width:630px; margin-top:5px; border-width: 1px 0 0 1px; border-spacing:0; border-collapse:collapse; border-style:solid; border-color:#00AED1;}
#h2h td {border-width: 0 1px 1px 0; border-style:solid; border-color:#00AED1;}

eburlea 23 Junior Poster · Answer 4 · 2012-10-18T18:09:31+00:00

Interesting fact is that when I include in the code the method alert("It is working!"); the alert message displays in both cases, except changing the color (working only when CSS file is removed).

<script>
var myTable = document.getElementById("leagues_stands");
var rows = myTable.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
    rows[i].onmouseover = function() {
        this.style.backgroundColor = "#FF0000";
        alert("It is working!");
    };
    rows[i].onmouseout = function() {
        this.style.backgroundColor = "#FFFFFF";
    };
}
</script>

eburlea 23 Junior Poster · Answer 5 · 2012-10-18T23:46:22+00:00

Yes, the files are in utf-8 charset format.

eburlea 23 Junior Poster · Answer 6 · 2012-10-19T15:10:10+00:00

I realised that the background color applied to <td> with CSS overwrites the background color applied to <tr> with Javascript. So that I removed the classes from <td> and placed them to <tr>:

/* Creating the table for leagues statistics */
  echo '<p>Full Time Over 2.5 Goals</p>';
  echo '<table id="leagues_stands">';
    echo '<tr>';
      echo '<td id="s" class="blue_header">#</td>';
      echo '<td id="xl_header" class="blue_header">League</td>';
      echo '<td id="m" class="blue_header">%</td>';
    echo '</tr>';
  $i = 0;
  $n = 1;
  while (isset($var[$i]))
    {
    echo '<tr class="blue_odd">';
      echo '<td id="s">'.$n.'</td>';
      echo '<td id="xl_body"><a href="overview.php?association='.$association[$i].'&&competition='.$league[$i].'&&season='.$s[$i].'">'.$association[$i].' '.$league[$i].'</a></td>';
      echo '<td id="m">'.number_format($var[$i],1).'%</td>';
    echo '</tr>';
    $i++;
    $n++;
    if (isset($var[$i]))
      {
      echo '<tr class="blue_even">';
        echo '<td id="s">'.$n.'</td>';
        echo '<td id="xl_body"><a href="overview.php?association='.$association[$i].'&&competition='.$league[$i].'&&season='.$s[$i].'">'.$association[$i].' '.$league[$i].'</a></td>';
        echo '<td id="m">'.number_format($var[$i],1).'%</td>';
      echo '</tr>';
      $i++;
      $n++;
      }
    }
  echo '</table>';

Javascript code works and it is as follows:

<script>
var myTable = document.getElementById("leagues_stands");
var rows = myTable.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
    rows[i].onmouseover = function() {
        this.style.backgroundColor = "#FF0000";
    };
    rows[i].onmouseout = function() {
        this.style.backgroundColor = "#CCFFFF";
    };
}
</script>

The problem now is other. The table rows are of two different colors, and I need them to be as they were before, after the mouse is out of the row. I have tried to use getElementsByClassName, but it does notwork.

What can be done?

eburlea 23 Junior Poster · Answer 7 · 2012-10-19T21:48:16+00:00

I have found the solution. I think because getElementsByTagName provides an ARRAY of ALL the tags found, I can only check through the respective array for the tags that belong to a certain class. Thus I bring here the Javascript code that finally is working:

<script>
var rows = document.getElementById("leagues_stands").getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
  if(rows[i].className == "blue_odd") {
    rows[i].onmouseover = function() {
      this.style.backgroundColor = "#00AED1";
    };
    rows[i].onmouseout = function() {
      this.style.backgroundColor = "#CCFFFF";
    };
  }
  else if(rows[i].className == "blue_even") {
    rows[i].onmouseover = function() {
      this.style.backgroundColor = "#00AED1";
    };
    rows[i].onmouseout = function() {
      this.style.backgroundColor = "#9FEEEE";
    };
  }
}
</script>