Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Use jQuery to change colors on a table

Posted on 2013-10-28
7
Medium Priority
?
344 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 54

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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 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 54

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

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

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

This article discusses how to implement server side field validation and display customized error messages to the client.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

963 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