Solved

html table built on xml data file

Posted on 2013-11-18
6
350 Views
Last Modified: 2013-11-20
I have a table and I want to freeze top row then the rest is hozizonal scrollbars which I have it's just the top header needs to be frozen and Also I added a image in the first cell of table and it's the team logo

TeamImg = $('<img>').attr('src', 'http://dev.sportsnetwork.com/aspdata/nhl2/NBA/Images/NBAlOGOSZ/' + $(this).attr('TeamID') + '.png');

but it's not coming up.

here is the source code. scrollbars work but top header isn't frozen at the top.

<!DOCTYPE html>
<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Player Table</title>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.min.css" type="text/css" media="screen" charset="utf-8"/>

	<script type="text/javascript">
	$(document).ready(function() {
		//load in the XML file
		loadData();
		
		//set up the dialog box
		var playerDialog = $('#playerDialog').dialog({
			autoOpen	: false,
			modal		: true,
			buttons		: [{ text: 'OK', click: function() { $(this).dialog('close') }}]
		});
		
		//open the dialog when a players table row is clicked on
		$('#players').on('click', 'tbody tr', function() {
			//set up the dialog title
			playerDialog.dialog('option', 'title', $(this).data('name'));
			
			//set up the dialog content (grab additional information from the data attributes of the row)
			$('#playerDialog').html(
				$(this).data('name') + ' is player number ' + $(this).data('number')
			);
			
			//open the dialog
			playerDialog.dialog('open');
		});
			
	});



	function loadData() {
		var xmlPath = '.';
		var xmlGameID = '18753';

		$.ajax({
			type: "GET",
			url: xmlPath + "/" + xmlGameID + ".xml",
			dataType: "xml"
		}).done(function(data){
			var gameData = $(data);
			startingPlayers = $('Player', gameData).filter(function() { return $(this).attr('Started') == '1'});
			
			$(startingPlayers).each(function(i, player) {
				
				newRow = $('#rowTemplate').clone().removeAttr('id');
				TeamImg = $('<img>').attr('src', 'http://dev.sportsnetwork.com/aspdata/nhl2/NBA/Images/NBAlOGOSZ/' + $(this).attr('TeamID') + '.png');
				playerImg = $('<img>').attr('src', 'http://images.sportsnetwork.com/bask/nba/atthecourt/players/' + $(this).attr('ID') + '.jpg');
				playerName = $('<p>').html( $(this).attr('Firstname') + ' ' + $(this).attr('Lastname') + ' (' + $(this).attr('Position') + ')');

				//add the data to the players table
				$('td:nth-child(1)', newRow).html( playerImg ).append( playerName );
				$('td:nth-child(2)', newRow).html( $(this).attr('Points'));
				$('td:nth-child(3)', newRow).html( $(this).attr('Assists'));
				$('td:nth-child(4)', newRow).html( $(this).attr('ORebounds'));
				$('td:nth-child(5)', newRow).html( $(this).attr('DRebounds'));
				$('td:nth-child(6)', newRow).html( $(this).attr('Steals'));
				$('td:nth-child(7)', newRow).html( $(this).attr('BlockedShots'));
				$('td:nth-child(8)', newRow).html( $(this).attr('TresMade'));

				//attach data attributes to the row if you need them later (in the dialog box for example);
				newRow.data('name', $(this).attr('Firstname') + ' ' + $(this).attr('Lastname'));
				newRow.data('number', $(this).attr('Number'));
				
				$('#players tbody').append(newRow);
			});
		});
	}
</script>

<style type="text/css">
	#playLogScroll { height: 360px; overflow-y: scroll; width: 750px; border: 1px solid grey; }
	#players { border: none; }
	#rowTemplate { display:none; }
	#players thead tr { background-color: #0099CC; color: #ffffff; }
	#players tbody td { text-align:center; }
	#players tbody tr { cursor: pointer; }
	#players colgroup col:nth-child(1) { width: 155px; }
	#players colgroup col { width: 85px; }
	#myDialog { display:none; }
</style>
</head>

<body>
 <div id="playLogScroll">
<table id="players">
	<colgroup><col><col><col><col><col><col><col><col></colgroup>
	<thead>
	<tr>
		<th>PlayerName</th>
		<th>Points</th>
		<th>Assists</th>
		<th>ORebounds</th>
		<th>DRebounds</th>
		<th>Steals</th>
		<th>Blocks</th>
		<th>TresMade</th>
	</tr>
	</thead>
	<tbody>
   
	<tr id="rowTemplate">
		<td class="playerName"></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
    </div>
	</tbody>
</table>


<div id="playerDialog">
	This is the dialog box
</div>

</body>
</html>

Open in new window

Thanks EE
Table.html
18753.XML
0
Comment
Question by:powerztom
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39657049
You've a jQUery plugin available : https://github.com/jmosbech/StickyTableHeaders
A demo here : http://jsfiddle.net/jmosbech/stFcx/
    $("#players").stickyTableHeaders();

Open in new window

0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39657064
No where in your code are you adding the Team logo to the DOM.  You create it (TeamImg), but then never do anything with it. Where's it supposed to go?
0
 

Author Comment

by:powerztom
ID: 39657160
Image is supposed to go right next to headshot of player if it's possiable to squeeze and have two images side by side in that cell.
0
Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39657203
OK. But it might break the layout. I can't test because it looks like the Team Logos are on your dev server, so I can't load them.

Have a look at this. Pay particular attention to the CSS as that's what gives you the fixed header / scrollable body. You may have to tweak the measurements.

<!DOCTYPE html>
<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Player Table</title>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.min.css" type="text/css" media="screen" charset="utf-8"/>

	<script type="text/javascript">
	$(document).ready(function() {
		//load in the XML file
		loadData();
		
		//set up the dialog box
		var playerDialog = $('#playerDialog').dialog({
			autoOpen	: false,
			modal		: true,
			buttons		: [{ text: 'OK', click: function() { $(this).dialog('close') }}]
		});
		
		//open the dialog when a players table row is clicked on
		$('#players').on('click', 'tbody tr', function() {
			//set up the dialog title
			playerDialog.dialog('option', 'title', $(this).data('name'));
			
			//set up the dialog content (grab additional information from the data attributes of the row)
			$('#playerDialog').html(
				$(this).data('name') + ' is player number ' + $(this).data('number')
			);
			
			//open the dialog
			playerDialog.dialog('open');
		});
	});



	function loadData() {
		var xmlPath = '.';
		var xmlGameID = '18753';

		$.ajax({
			type: "GET",
			url: xmlPath + "/" + xmlGameID + ".xml",
			dataType: "xml"
		}).done(function(data){
			var gameData = $(data);
			startingPlayers = $('Player', gameData).filter(function() { return $(this).attr('Started') == '1'});
			
			$(startingPlayers).each(function(i, player) {
				
				newRow = $('#rowTemplate').clone().removeAttr('id');
				TeamImg = $('<img>').attr('src', 'http://dev.sportsnetwork.com/aspdata/nhl2/NBA/Images/NBAlOGOSZ/' + $(this).attr('TeamID') + '.png');
				playerImg = $('<img>').attr('src', 'http://images.sportsnetwork.com/bask/nba/atthecourt/players/' + $(this).attr('ID') + '.jpg');
				playerName = $('<p>').html( $(this).attr('Firstname') + ' ' + $(this).attr('Lastname') + ' (' + $(this).attr('Position') + ')');

				//add the data to the players table
				$('td:nth-child(1)', newRow).html( playerImg ).append( TeamImg ).append( playerName );
				$('td:nth-child(2)', newRow).html( $(this).attr('Points'));
				$('td:nth-child(3)', newRow).html( $(this).attr('Assists'));
				$('td:nth-child(4)', newRow).html( $(this).attr('ORebounds'));
				$('td:nth-child(5)', newRow).html( $(this).attr('DRebounds'));
				$('td:nth-child(6)', newRow).html( $(this).attr('Steals'));
				$('td:nth-child(7)', newRow).html( $(this).attr('BlockedShots'));
				$('td:nth-child(8)', newRow).html( $(this).attr('TresMade'));

				//attach data attributes to the row if you need them later (in the dialog box for example);
				newRow.data('name', $(this).attr('Firstname') + ' ' + $(this).attr('Lastname'));
				newRow.data('number', $(this).attr('Number'));
				
				$('#players tbody').append(newRow);
			});
		});
	}
</script>

<style type="text/css">
	#playLog { overflow: hidden; width: 860px; border: 1px solid grey; height: 314px; } 

	#players thead tr { background-color: #0099CC; color: #ffffff; display:block; position:relative; }
	#players thead th, #players tbody td { padding: 3px; width: 93px; border-color: #dddddd; border-style: solid solid none none; border-width: 1px; }
	#players thead th.playerName, #players tbody td.playerName { width: 153px; }
	
	#players tbody td:nth-child(8) { width: 76px; }
	#players tbody  { display: block; height: 288px;  overflow: auto; width: 100%; } 	
	#players tbody tr { cursor: pointer; }
	#players tbody td { text-align:center; }

	#myDialog { display:none; }
	#rowTemplate { display:none; }
</style>
</head>

<body>
<div id="playLog">
<table id="players" cellspacing='0' cellpadding='0'>
	<thead>
	<tr>
		<th class="playerName">PlayerName</th>
		<th>Points</th>
		<th>Assists</th>
		<th>ORebounds</th>
		<th>DRebounds</th>
		<th>Steals</th>
		<th>Blocks</th>
		<th>TresMade</th>
	</tr>
	</thead>
	<tbody>
	<tr id="rowTemplate">
		<td class="playerName"></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	</tbody>
</table>
</div>

<div id="playerDialog">
	This is the dialog box
</div>

</body>
</html>

Open in new window

0
 

Author Closing Comment

by:powerztom
ID: 39657243
This guy is good ! Chris very nice I wish you could see this Things are looking good.
Thanks man Your the hero of the day.
0
 

Author Comment

by:powerztom
ID: 39662610
Chris I got a ticket I'm almost out of code to write except for last ballbusting thing. But this ticket shouldn't be too hard for a guy with your knowledge.




http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28299226.html
0

Featured Post

Raise the IQ of Your IT Alerts

From IT major incidents to manufacturing line slowdowns, every business process generates insights that need to reach the people required to take action. You need a platform that integrates with your business tools to create fully enabled DevOps toolchains.

You need xMatters.

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

687 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