0

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:

3
Contributors
10
Replies
12
Views
4 Years
Discussion Span
Last Post by eburlea
0
<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>
0

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.

0
<?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>
0
@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;}
0

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>
0

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>
0

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 by Troy III

0

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?

0

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>
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.