• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 361
  • Last Modified:

html table built on xml data file

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
powerztom
Asked:
powerztom
  • 3
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
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
 
Chris StanyonCommented:
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
 
powerztomAuthor Commented:
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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
Chris StanyonCommented:
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
 
powerztomAuthor Commented:
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
 
powerztomAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now