Solved

Use jQuery to change colors on a table

Posted on 2013-10-28
7
323 Views
Last Modified: 2013-10-29
Padas I created my own page looks good but I inserted the css you had written to can be called using jquery. Now right now I've been playing with it and haven't had and reak luck i had odd things happens but not the wanted result I going to get you two xml files one is for eagles left side and the other is for greenbay to the right. The images will be missing cause of our firewall but you will have the page and xml to make down and yards to go jump and cells that don't have data become black. any questions hit me back

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>The Sports NETWORK</title>
<style type="text/css">
.TOPCENER {
	text-align: center;
	vertical-align: top;
}
.AWAYSCORE {
	color: #FFF;
	font-size: 45px;
}
.LEFTHELMET {	text-align: center;
	vertical-align: middle;
}
.homescore {
	color: #FFF;
	font-size: 45px;
}
.ballon {
	color: #FFF;
}
.yardtogo {
	color: #FFF;
}
.staduim {
	color: #FFF;
}
#scoreboard{
	background-color:#000;
	}
.sb_team_name{
	background-color:#fff;
	color:#000;
	
	}
	.formatscorce {	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 45px;
	font-weight: bold;
}	
.sb_score_title_heading{
	background-color:#E4E4E4;
	}
.sb_score_title_detail{
	background-color:#cccccc;
	}	
.sb_qtr_score{
	background-color:#ffff99;
	text-align:center;
	}	
.sb_ball_on_text{
	background-color:#009933;
	text-align:center:;
	}
.sb_ball_on_data{
	background-color:#FFFF00;
	text-align:center;
	}	
.sb_yards_to_go{
	background-color:#FFCC00	;
	text-align:center;	
}
.left{text-align:left;}
#scoreboard tr td div .formatscorce #VS {
	color: #FFF;
}
  #scoreboard tr td #HS #HS #HS {
	color: #FFF;
}
  #scoreboard tr td #HS p {
	color: #FFF;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var xmlPath = '.' //'/xml/nfl/scores/real';
var xmlGameID = 'AB-3171_110'; // game id only, _counter.xml will be added in the ajax 
var txtAway,txtHome;
var teamNames = {
    "079": "GIANTS",
    "068": "LIONS",
    "084": "49ERS",
    "063": "BEARS",
    "083": "CHARGERS",
    "085": "SEAHAWKS",
    "088": "REDSKINS",
    "061": "FALCONS",
    "062": "BILLS",
    "064": "BENGALS",
    "065": "RAVENS",
    "066": "COWBOYS",
    "067": "BRONCOS",
    "069": "PACKERS",
    "070": "TITANS",
    "071": "COLTS",
    "072": "CHIEFS",
    "073": "RAIDERS",
    "074": "RAMS",
    "075": "DOLPHINS",
    "076": "VIKINGS",
    "077": "PATRIOTS",
    "078": "SAINTS",
    "080": "JETS",
    "081": "EAGLES",
    "082": "STEELERS",
    "086": "CARDINALS",
    "087": "BUCS",
    "089": "PANTHERS",
    "090": "JAGUARS",
    "120": "BROWNS",
    "151": "TEXANS",
    "685": "A-F-C",
    "686": "N-F-C"
};

$(document).ready(function(){
    $.ajax({
        type: "GET",
        url:  xmlPath+"/"+xmlGameID+ ".xml",
        dataType: "xml",
        success: function(data) {
            var d = $(data);
            d.find('Team').each(function(i,Team){
                var team=$(Team);
                var id = team.attr("ID").toLowerCase();
                var teamname = team.attr("name");
                var homeOrAway = team.attr("vh");
				
                var selector1 = (homeOrAway=="A") ? '#Visitor' : '#Hometeam' ;
                var selector2 = (homeOrAway=="A") ? '#VTeamname' : '#HTeamName' ;

                $(selector1).html(teamname);
                $(selector2).html(teamNames[id]);
                var d = $(data);
                d.find('Team').each(function(i,Team){
                    if ($(Team).attr('vh') == "H") {

                        $('#imgHomeHelmet').attr('src', 'http://powerzsoftware.com/tsn/nfl/PS/'+$(Team).attr('ID')+".png");

                    }
					 var HS1 = $(Team).find('Linescore');
         // var hs2 = HS1.attr('Score');
          $('#HS').html(HS1.attr('Score')); 
                })
                d.find('Team').each(function(i,Team){
                    if ($(Team).attr('vh') == "A") {

                        $('#imgVisitHelmet').attr('src', 'http://powerzsoftware.com/tsn/nfl/PS/'+$(Team).attr('ID')+".png");

                    }
					 var VS1 = $(Team).find('Linescore');
         // var vs2 = VS1.attr('Score');
          $('#VS').html(VS1.attr('Score'));
                });
            });
        } 
    });
});

        // changed all below to just use the variables that contain the text directly, as the arrays do not exist and don't seem necessary in this situation
		
		
       function loadData() {
  $.ajax({
    type: "GET",
    url:  xmlPath+"/"+xmlGameID+".xml",
    dataType: "xml",
    success: function(data) {
      var d = $(data);
      var Play = d.find('Play');
	  $('#Staduim').html($(Play).attr('Location'));
	 // var id = team.attr("ID").toLowerCase();
               // var vh = team.attr('vh'); // A or H...
              //  var sHomeOrAway = vh == 'H' ? 'home' : 'away';
	  
               
             //   $('#txt' + sHomeOrAway).html(team.attr('name'));
      d.find('Team').each(function(i,Team){
		//var vh = team.attr('vh'); // A or H...
            //    var sHomeOrAway = vh == 'H' ? 'home' : 'away';
		  
        if ($(Team).attr('vh') == "A") {
			 var VS1 = $(Team).find('Linescore');
			 
			  var awayname =$(Team).attr('name'); 
         // var vs2 = VS1.attr('Score');
		 $('#txtAway').html(awayname);
          	$('#VS').html(VS1.attr('Score'));
			$('#miniaway').attr('src', 'http://powerzsoftware.com/tsn/nfl/minilogos/' + $(Team).attr('ID') + '.png');
		   $(Team).find('LineQuarter').each(function(){
						if($(this).attr('Qtr') == "1") {
							$('#periodA1').text($(this).attr('score'));
						} else if ($(this).attr('Qtr') == "2") {
							$('#periodA2').text($(this).attr('score'));
						} else if ($(this).attr('Qtr') == "3") {
							$('#periodA3').text($(this).attr('score'));
						} else if ($(this).attr('Qtr') == "4"){
							$('#periodA4').text($(this).attr('score'));	
						} else if ($(this).attr('Qtr') == "5"){
							$('#periodA5').text($(this).attr('score'));	
						} else if ($(this).attr('Qtr') == "6"){
							$('#periodA5').text($(this).attr('score'));
						}
					});
			 if ($(Team).attr('ID') == $(Play).attr('PossID')) {
         
		 
         // var RD = Play.attr('ResultingDown') ;
            $('#VRd').html(Play.attr('ResultingDown'));
           // var Rtg = Play.attr('ResultingToGo') ;
            $('#VRtg').html(Play.attr('ResultingToGo')); 
		 
		 // $('#VRd').show()
		  // $('#VRtg').show()
		
			$('#Hrd').html('');
            $('#HRtg').html('');
			$('#awayand').html('&');
			$('#homeand').html('');
            
			//$('#VRd').animate({backgroundColor: '#FFFF00', color: '#fff', width: 500}, 1000);
			//$('#Hrd').hide()
		  //$('#HRtg').hide()
         }  
        }
		 
		 d.find('Team').each(function(i,Team){
			  
        if ($(Team).attr('vh') == "H") {
			 var HS1 = $(Team).find('Linescore');
			 var homename =$(Team).attr('name');
         // var hs2 = HS1.attr('Score');
          $('#HS').html(HS1.attr('Score')); 
		   $('#txtHome').html(homename);
         // var vs2 = VS1.attr('Score');
         $('#minihome').attr('src', 'http://powerzsoftware.com/tsn/nfl/minilogos/' + $(Team).attr('ID') + '.png'); 	
		   $(Team).find('LineQuarter').each(function(){
						if($(this).attr('Qtr') == "1") {
							$('#periodH1').text($(this).attr('score'));
						} else if ($(this).attr('Qtr') == "2") {
							$('#periodH2').text($(this).attr('score'));
						} else if ($(this).attr('Qtr') == "3") {
							$('#periodH3').text($(this).attr('score'));
						} else if ($(this).attr('Qtr') == "4"){
							$('#periodH4').text($(this).attr('score'));	
						} else if ($(this).attr('Qtr') == "5"){
							$('#periodH5').text($(this).attr('score'));	
						} else if ($(this).attr('Qtr') == "6"){
							$('#periodH5').text($(this).attr('score'));
						}
					});
			if ($(Team).attr('ID') == $(Play).attr('PossID')) {
         
		  
			  var RD2 = Play.attr('ResultingDown') ;
            $('#Hrd').html(RD2);
			//$('#Hrd').animate({backgroundColor: '#FFFF00', color: '#fff', width: 500}, 1000);
            var Rtg2 = Play.attr('ResultingToGo') ;
            $('#HRtg').html(Rtg2);
         $('#downX').html(RD2);
		$('#yardX').html(Rtg2);
		 //  $('#VRd').hide();
		 // $('#VRtg').hide();
		
		
		   
			$('#VRd').html('');
            $('#VRtg').html('');
			$('#homeand').html('&'); 
			$('#awayand').html('');
            
			//$('#Hrd').show()
		 // $('#HRtg').show()
          }
		
        }
     });
	  });
	  
	  // each
        // changed all below to just use the variables that contain the text directly, as the arrays do not exist and don't seem necessary in this situation
      var inn = Play.attr('TimeLeft') ;
      $('#time').html(inn ); // timeleft[inn]
      var bo = Play.attr('BallYrd') ;
      $('#Ballon').html(bo ); // ballyrd[bo]
      var dn = Play.attr('ResultingDown') ;
      $('#Down').html(dn); // resultingdown[dn]
	  $('#downX').html(dn);
      var ydtogo = Play.attr('ResultingToGo') ;
      $('#Ydstogo').html(ydtogo); // resultingtogo[ydtogo]
	  $('#yardX').html(ydtogo);
      var qtr = Play.attr('Quarter') ;
	  if (qtr == 4) {
		$('#Q').html("4th Quarter");  
	  } else if (qtr==3) {
		 $('#Q').html("3rd Quarter");
	 } else if (qtr==2) {
		 $('#Q').html("2nd Quarter");
		 } else if (qtr==1) {
		 $('#Q').html("1st Quarter");
		 }
       // quarter[qtr]
     // ++counterXml;
    }  
  }); //ajax

  }

</script>
</head>

<body>
<table width="700" border="0">
  <tr>
    <td bgcolor="#000000"><table width="100%" border="0">
      <tr>
        <td width="12%"><p class="TOPCENER"><span class="LEFTHELMET"><img src="VistorHelmet.png" alt="" name="imgVisitHelmet" id="imgVisitHelmet"></span></p>
          <p>&nbsp;</p>
          <p class="TOPCENER">&nbsp;</p></td>
        <td colspan="2" class="TOPCENER"><span class="AWAYSCORE" id="VS">0</span></td>
        <td width="47%" class="TOPCENER"><table width="100%" border="0">
          <tr bgcolor="#DFDFDF">
            <td width="14%"><div align="center" id="time"></div></td>
            <td width="31%"><div align="center" id="Q"></div></td>
            <td width="11%"><div align="center">1</div></td>
            <td width="11%"><div align="center">2</div></td>
            <td width="10%"><div align="center">3</div></td>
            <td width="10%"><div align="center">4</div></td>
            <td width="13%"><div align="center">OT</div></td>
            </tr>
          <tr bgcolor="#DFDFDF">
            <td bgcolor="#000000"><div align="center"><img src="http://dev.sportsnetwork.com/aspdata/nfl2/miniLogos/069.png" alt="" name="miniaway" width="27" height="24" id="miniaway"></div></td>
            <td bgcolor="#FFFFFF"><div align="left" id="txtAway">Visitor</div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodA1"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodA2"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodA3"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodA4"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodA5"></div></td>
            </tr>
          <tr bgcolor="#DFDFDF">
            <td bgcolor="#000000"><div align="center"><img src="http://dev.sportsnetwork.com/aspdata/nfl2/minilogos/081.png"></div></td>
            <td bgcolor="#FFFFFF"><div align="left" id="txtHome">HomeTeam</div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodH1"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodH2"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodH3"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodH4"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodH5"></div></td>
            </tr>
          </table>
          <table width="100%" border="0">
            <tr>
              <td width="12%"><div align="center"><img src="minilogos/football.png" alt="" width="32" height="21"></div></td>
              <td width="23%" bgcolor="#006633" class="ballon"><strong><em>Ball is on</em></strong></td>
              <td width="9%" bgcolor="#FFFF00"><div align="center" id="Ballon"></div></td>
              <td width="23%" bgcolor="#006633"><div align="center" class="yardtogo"><strong><em>Yds to go</em></strong></div></td>
              <td width="11%" bgcolor="#FFCC00"><div align="center" id="downX"></div></td>
              <td width="10%" bgcolor="#FF9900"><div align="center">&amp;</div></td>
              <td width="12%" bgcolor="#FFCC00"><div align="center" id="yardX"></div></td>
              </tr>
          </table></td>
        <td width="11%" class="TOPCENER"><span class="homescore" id="HS">0</span></td>
        <td colspan="2" class="TOPCENER"><span class="LEFTHELMET"><img src="VistorHelmet.png" alt="" name="imgHomeHelmet" id="imgHomeHelmet"></span></td>
      </tr>
      <tr>
        <td bgcolor="#FFCC33"><div align="right" id="VRd"></div></td>
        <td width="4%" bgcolor="#FF9900" id="awayand"><div align="center" id="awayand">&amp;</div></td>
        <td width="9%" bgcolor="#FFCC33"><div align="left" id="VRtg"></div></td>
        <td><div align="center" class="staduim"><strong id="Staduim">Staduim</strong></div></td>
        <td bgcolor="#FFCC33"><div align="right" id="Hrd"></div></td>
        <td width="5%" bgcolor="#FF9900"><div align="center" id="homeand">&amp;</div></td>
        <td width="12%" bgcolor="#FFCC33"><div align="left" id="HRtg"></div></td>
      </tr>
    </table></td>
  </tr>
</table>
<script>
var myVar=setInterval(function(){myTimer()},1000);

function myTimer()
{

loadData();

}
</script>
</body>
</html>

Open in new window



These Images are what I mean in my description
graphic

graphic
tHANKS ee
NFLGAME.zip
0
Comment
Question by:powerztom
  • 4
  • 3
7 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39607873
Can you make an image of what the end result should be.
0
 

Author Comment

by:powerztom
ID: 39608652
PossID is the xml attribute that that team has the ball. When the team has the ball the lower corner is hightlighted like image above and the opposite corner becomes black. When PossID changes the opposing team has the ball and the lower corner for that team is highlighted and other corner becomes black. The corners representing downs and yards to go  
are changing all game long that is the end result.

if ($(Team).attr('ID') == $(Play).attr('PossID')) {
         
		  
			  var RD2 = Play.attr('ResultingDown') ;
            $('#Hrd').html(RD2);
			
            var Rtg2 = Play.attr('ResultingToGo') ;
            $('#HRtg').html(Rtg2);
         $('#downX').html(RD2);
		$('#yardX').html(Rtg2);
		
		
		
		   
			$('#VRd').html('');
            $('#VRtg').html('');
			$('#homeand').html('&'); 
			$('#awayand').html('');
            

Open in new window


this is a example of code where hightlighting and black cells would go
0
 

Author Comment

by:powerztom
ID: 39608940
I used this but it only worked partially Check it out in the zip folder the awayteam lower cells should turn black only one does and hometeam cells get highlighted which they do however one side works and one side doesn't

 if ($(Team).attr('ID') == $(Play).attr('PossID')) {
         
		 
       
            $('#VRd').html(Play.attr('ResultingDown'));
           
            $('#VRtg').html(Play.attr('ResultingToGo')); 
		 
		 // $('#VRd').show()
		  // $('#VRtg').show()
		$('#VRd').css({'background-color': '#FFCC33'});
		$('#VRtg').css({'background-color': '#FFCC33'});
		 $('#awayand').css({'background-color': '#FF9900'});
		 $('#HRtg').css({'background-color': '#000000'});
		$('#Hrd').css({'background-color': '#000000'});
		 $('#homeand').css({'background-color': '#000000'});
			$('#Hrd').html('');
            $('#HRtg').html('');
			$('#awayand').html('&');
			$('#homeand').html('');
            
			
         }  
        }

Open in new window

0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39609602
Can you please make this easier for me and anybody else that views this thread.  Instead of a zip file, post a link to a sample page that will have all of the working parts.  Or just create static data if you need to.  Finally, an image of what the final version should look like.

fyi, in your code here http:Q_28279163.html#a39608940 I think you need to take out the last  bracket.
 if ($(Team).attr('ID') == $(Play).attr('PossID')) {



$('#VRd').html(Play.attr('ResultingDown'));

     $('#VRtg').html(Play.attr('ResultingToGo'));

     // $('#VRd').show()
     // $('#VRtg').show()
     $('#VRd').css({
         'background-color': '#FFCC33'
     });
     $('#VRtg').css({
         'background-color': '#FFCC33'
     });
     $('#awayand').css({
         'background-color': '#FF9900'
     });
     $('#HRtg').css({
         'background-color': '#000000'
     });
     $('#Hrd').css({
         'background-color': '#000000'
     });
     $('#homeand').css({
         'background-color': '#000000'
     });
     $('#Hrd').html('');
     $('#HRtg').html('');
     $('#awayand').html('&');
     $('#homeand').html('');


 }

Open in new window

0
 

Author Closing Comment

by:powerztom
ID: 39610051
My syntax was slightly off Padas posted code above and I had css.({
         'background-color': '#000000' the correct syntax was css({
         'background-color': '#000000' No Dot. And that solved it. Thanks to Padas
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39610226
I'm glad that helped.  

Try using something like http://jsbeautifier.org/ to make your js look pretty. It will help you find errors like the extra bracket.
0
 

Author Comment

by:powerztom
ID: 39610335
Padas thanks alot brother!
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Why doesn't Google directions work? 6 47
Location of Buttons 4 15
filter portfolio grid display on page load (wordpress) 7 20
Add shadow behind div 5 14
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question