Avatar of Tom Powers
Tom Powers
 asked on

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">
	<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
		//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)
				$(this).data('name') + ' is player number ' + $(this).data('number')
			//open the dialog

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

			type: "GET",
			url: xmlPath + "/" + xmlGameID + ".xml",
			dataType: "xml"
			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);

<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; }

 <div id="playLogScroll">
<table id="players">
	<tr id="rowTemplate">
		<td class="playerName"></td>

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


Open in new window

Thanks EE

Avatar of undefined
Last Comment
Tom Powers

8/22/2022 - Mon

You've a jQUery plugin available : https://github.com/jmosbech/StickyTableHeaders
A demo here : http://jsfiddle.net/jmosbech/stFcx/

Open in new window

Chris Stanyon

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?
Tom Powers

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.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Chris Stanyon

View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Tom Powers

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.
Tom Powers

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.