troubleshooting Question

html table built on xml data file

Avatar of Tom Powers
Tom Powers asked on
6 Comments1 Solution430 ViewsLast Modified:
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', '' + $(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="//"></script>
	<script src="//"></script>
	<link rel="stylesheet" href="" 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', '' + $(this).attr('TeamID') + '.png');
				playerImg = $('<img>').attr('src', '' + $(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);'name', $(this).attr('Firstname') + ' ' + $(this).attr('Lastname'));'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

Thanks EE
Join our community to see this answer!
Unlock 1 Answer and 6 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 6 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros