HJÆLP - til at sætte farve og andre attributter for tabellen i dette XML-job (?)
HEJ,Indledningsvis:
Dette er mit andet XML-job nogensinde i HTML/JAVASCRIPT (?) . Så bær over med mig hvis det er forkert placeret. (Og det første var betydeligt enklere for jeg ved ikke for hvor mange måneder siden (suk)! )
Det jeg skal lave er et "GANTT-kort", men lodret. Startende fra 08:00 --> 24:00 for MANDAG --> SØNDAG for et år.
Kolonne 0 er tiden fra 08:00 i spring på 15 minutter (giver 65 rækker).
Kolonne 1 er MANDAG, Kolonne 2 er TIRSDAG..... kolonne 7 er SØNMDAG.
Så jeg søgte på nettet og fandt scriptet / HTML-koden vist nedenfor.
Men jeg har brug for at hver element i XML-koden har en attribut
(nemlig farven)
Eksempel:
<final>
<klokke>08:00 - 08:15</klokke>
<Mandag>Uruguay</Mandag>
<Tirsdag>Uruguay</Tirsdag>
<Onsdag>4</Onsdag>
<Torsdag>Argentina</Torsdag>
<Fredag>2</Fredag>
<Lordag>Abekatte</Lordag>
<Sondag>Abbekatte</Sondag>
</final>
DEL AF XML-filen;
(XML Filen er også hentet fra nettet og er lokalt tilpasset, så derfor de lidt undelige navne/tekster i filen). Jeg vil gerne have en attribut på hvert element i XML således at den ser sådan ud:
<final>
<klokke color="white">08:00 - 08:15</klokke>
<Mandag color="white">Uruguay</Mandag>
<Tirsdag color="white">Uruguay</Tirsdag>
<Onsdag color="red">4</Onsdag>
<Torsdag color="white">Argentina</Torsdag>
<Fredag color="white">2</Fredag>
<Lordag color="white">Abekatte</Lordag>
<Sondag color="white">Abbekatte</Sondag>
</final>
Farven COLOR er her vist som WHITE man skal for hvert element være variabel.
1:)
Hvordan får jeg denne attribut inkluderet i XML-filen ?
Her er HTML-koden, som henter og viser/behandler XML-filen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>TEST 001 </title>
<style type="text/css">
html
{
background-color: #cccccc;
}
body
{
background-color: #eeeeee;
font-family: Verdana;
font-size: 12px;
margin-top: 0px;
margin-left: 0%;
margin-right: 0;
border: 3px groove darkred;
padding: 5px;
}
h1
{
text-align: left;
font-size: 1.5em;
font-weight: bold;
}
h2
{
text-align: left;
font-size: 1.1em;
font-weight: bold;
text-decoration: underline;
}
.buttons
{
margin-top:10px;
}
table
{
table-collapse: collapse;
border-spacing: 0;
}
td
{
border: 1px groove black;
padding: 0px;
width: 120px;
font-family: Verdana;
font-weight: none;
font-size: 12px;
text-align: center;
height: 20px;
}
th
{
border: 1px groove black;
padding: 7px;
width: 120px;
font-family: Arial;
font-size: 12px;
text-align: center;
}
.ctr
{
text-align: left;
}
.ctr1
{
text-align: right;
font-family: Garamond;
font-size: 8px;
}
</style>
<script type="text/javascript">
var xDoc;
//
// verify that browser supports XML features and load external .xml file
//
function verifySupport(xFile)
{
if (document.implementation && document.implementation.createDocument) // this is the W3C DOM way, supported so far only in NN6+
{
xDoc = document.implementation.createDocument("", "theXdoc", null);
}
else
if (typeof ActiveXObject != "undefined") // make sure real object is supported (sorry, IE5/Mac)
{
if (document.getElementById("msxml").async)
{
xDoc = new ActiveXObject("Msxml.DOMDocument");
}
}
if (xDoc && typeof xDoc.load != "undefined") // load external file (from same domain)
{
xDoc.load(xFile);
return true;
}
else
{
var reply = confirm("This example requires a browser with XML support, such as IE5+/Windows or Netscape 6+.n nGo back to previous page?");
if (reply)
{
history.back();
}
}
return false;
}
// Draw table from xDoc document tree data
function drawTable(tbody)
{
var tr, td, i, j, oneRecord;
tbody = document.getElementById(tbody);
//
// node tree
//
var data = xDoc.getElementsByTagName("worldcup")[0];
//
// for td class attributes
//
var classes = ["ctr","ctr1","ctr","ctr","ctr","ctr","ctr","ctr","ctr"];
for (i = 0; i < data.childNodes.length; i++)
{
//
// use only 1st level element nodes to skip 1st level text nodes in NN
//
if (data.childNodes[i].nodeType == 1)
{
//
// one final match record
//
oneRecord = data.childNodes[i];
tr = tbody.insertRow(tbody.rows.length);
td = tr.insertCell(tr.cells.length);
td.setAttribute("class",classes[tr.cells.length-1]);
td.innerHTML = oneRecord.getElementsByTagName("klokke")[0].firstChild.nodeValue;
td = tr.insertCell(tr.cells.length);
td.setAttribute("class",classes[tr.cells.length-1]);
td.innerHTML = oneRecord.getElementsByTagName("Mandag")[0].firstChild.nodeValue;
td = tr.insertCell(tr.cells.length);
td.setAttribute("class",classes[tr.cells.length-1]);
td.innerHTML = oneRecord.getElementsByTagName("Tirsdag")[0].firstChild.nodeValue;
td = tr.insertCell(tr.cells.length);
td.setAttribute("class",classes[tr.cells.length-1]);
td.innerHTML = oneRecord.getElementsByTagName("Onsdag")[0].firstChild.nodeValue;
td = tr.insertCell(tr.cells.length);
td.setAttribute("class",classes[tr.cells.length-1]);
// td.setAttribute("backgroundColor","white");
td.innerHTML = oneRecord.getElementsByTagName("Torsdag")[0].firstChild.nodeValue;
td = tr.insertCell(tr.cells.length);
td.setAttribute("class",classes[tr.cells.length-1]);
td.innerHTML = oneRecord.getElementsByTagName("Fredag")[0].firstChild.nodeValue;
td = tr.insertCell(tr.cells.length);
td.setAttribute("class",classes[tr.cells.length-1]);
td.innerHTML = oneRecord.getElementsByTagName("Lordag")[0].firstChild.nodeValue;
td = tr.insertCell(tr.cells.length);
td.setAttribute("class",classes[tr.cells.length-1]);
td.innerHTML = oneRecord.getElementsByTagName("Sondag")[0].firstChild.nodeValue;
}
}
}
function init(xFile)
{
if (verifySupport(xFile)) // confirm browser supports needed features and load .xml file
{
setTimeout("drawTable('matchData')", 1000); // let file loading catch up to execution thread
}
}
</script>
</head>
<body onload="init('worldCupFinals.xml')">
<h1>Dette er en overskrift <BR><BR><BR><BR>123456</h1>
<hr />
<table id="cupFinals">
<thead>
<tr>
<th style="width: 120px;">KLOKKE</th>
<th style="width: 120px;" style="background: lime;">MANDAG
<script type='text/javascript'> // Dummy retttes senere
document.write('<BR>11-Maj-2012' );
</script>
<th style="width: 120px;">TIRSDAG
<script type='text/javascript'> // Dummy retttes senere
document.write('<BR>12-Maj-2012' );
</script>
</th>
<th style="width: 120px;">ONSDAG
<script type='text/javascript'> // Dummy retttes senere
document.write('<BR>13-Maj-2012' );
</script>
</th>
<th style="width: 120px;">TORSDAG
<script type='text/javascript'> // Dummy rettes senere
document.write('<BR>14-Maj-2012' );
</script>
</th>
<th style="width: 120px;">FREDAG
<script type='text/javascript'> // Dummy retttes senere
document.write('<BR>15-Maj-2012' );
</script>
</th>
<th style="width: 120px;">LØRDAG
<script type='text/javascript'> // Dummy retttes senere
document.write('<BR>16-Maj-2012' );
</script>
</th>
<th style="width: 120px;">SØNDAG
<script type='text/javascript'> // Dummy retttes senere
document.write('<BR>17-Maj-2012' );
</script>
</th>
</tr>
</thead>
<tbody id="matchData"></tbody>
</table>
<object id="msxml" WIDTH="1" HEIGHT="1"
classid="CLSID:2933BF90-7B36-11d2-B20E-00C04F983E60" >
</object>
</body>
</html>
Så spørgsmålet er nu:
td = tr.insertCell(tr.cells.length);
td.setAttribute("class",classes[tr.cells.length-1]);
td.innerHTML = oneRecord.getElementsByTagName("Onsdag")[0].firstChild.nodeValue;
Med denne ovenstående tekst kan jeg ændre attributter for hver enkel TD tag i tabellen (farve / font / navn / id osv.), men her er det jeg står af.
(Jeg har brug for at kunne sætte ID, en JavaScript "EXEC" = onClick ="xxx-rutine(col,row);", farve, gerne font (og størrelse) og bredde på denne TD celle. Men det skal ske via XML attributter i XML-filen.
Så hvordan gør jeg det ?
KRISTIAN
