Solved

Use jQuery to change colors on a table

Posted on 2013-10-28
7
316 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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now