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.
Table.html
18753.XML
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>
Thanks EETable.html
18753.XML
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?
ASKER
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
Thanks man Your the hero of the day.
ASKER
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.
https://www.experts-exchange.com/questions/28299226/pulling-xml-data-from-two-different-sections-for-one-player.html
https://www.experts-exchange.com/questions/28299226/pulling-xml-data-from-two-different-sections-for-one-player.html
A demo here : http://jsfiddle.net/jmosbech/stFcx/
Open in new window