How can I design the table with .odd and. even to make .odd grey and .even white. And I want to add an autorefresh script to the table but I dont want to reload the full html page. How is that possible? It would be very nice if you will find a solution, Its an XML Application Thanks
I need some text to post the question: bwrebgfisdbkgbvfhewsbdgbfvewbfdsbgfuivbcfhiesbdchgvbchfedbghfvc fhdcv iuewbasidbguifreiudsgfvuieisbygkfvbefnisdgio fioveosbdgfvnckfdsjxygfmls
<script>
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xmlhttp.open("GET", "https://start.vag.de/dm/api/v1/fahrten.xml/UBahn/1013743" , true);
xmlhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th style='text-align:center;width:20%'></th><th></th><th></th></tr>";
var x = xmlDoc.getElementsByTagName("Halteposition");
var c = xmlDoc.getElementsByTagName("FahrtResponse");
var t = xmlDoc.getElementsByTagName("Metadata");
for (v = 0; v <c.length; v++) {
document.getElementById("fahrten-titel").innerHTML = c[v].getElementsByTagName("Linienname")[0].childNodes[0].nodeValue + " " + c[v].getElementsByTagName("Richtungstext")[0].childNodes[0].nodeValue;
document.getElementById("datum-der-fahrt").innerHTML = c[v].getElementsByTagName("Betriebstag")[0].childNodes[0].nodeValue;
}
for (h = 0; h <t.length; h++) {
var uhrzeit = t[h].getElementsByTagName("Timestamp")[0].childNodes[0].nodeValue;
var uhrzeit_hhmm = new Date(uhrzeit).toTimeString().replace(/.*(\d{2}:\d{2}:\d{0}).*/, "$1");
}
var gleis = "";
for (i = 0; i <x.length; i++) {
if (x[i].childNodes[3].innerHTML > "AA:0"){ gleis = x[i].childNodes[3].innerHTML.replace(/[a-zA-Z.,: ]/g, "");}else{gleis = "?"}
var ankunftszeitsollvalue = x[i].getElementsByTagName("AnkunftszeitSoll")[0] ? x[i].getElementsByTagName("AnkunftszeitSoll")[0].childNodes[0].nodeValue : "";
var abfahrtszeitsollvalue = x[i].getElementsByTagName("AbfahrtszeitSoll")[0] ? x[i].getElementsByTagName("AbfahrtszeitSoll")[0].childNodes[0].nodeValue : "";
var abfahrtszeitistvalue = x[i].getElementsByTagName("AbfahrtszeitIst")[0] ? x[i].getElementsByTagName("AbfahrtszeitIst")[0].childNodes[0].nodeValue : "";
var ankunftszeitistvalue = x[i].getElementsByTagName("AnkunftszeitIst")[0] ? x[i].getElementsByTagName("AnkunftszeitIst")[0].childNodes[0].nodeValue : "";
var abfahrt_hhmm = new Date(abfahrtszeitistvalue).toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");
var ankunft_hhmm = new Date(ankunftszeitistvalue).toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");
var abfahrt_soll_hhmm = new Date(abfahrtszeitsollvalue).toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");
var ankunft_soll_hhmm = new Date(ankunftszeitsollvalue).toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");
if (abfahrt_hhmm == "Invalid Date"){abfahrt_hhmm = ankunft_hhmm}
if (abfahrt_soll_hhmm == abfahrt_hhmm){abfahrt_hhmm = "<a style='color:green'>" + abfahrt_hhmm + "</a>"}
if (abfahrt_soll_hhmm < abfahrt_hhmm){abfahrt_hhmm = "<a style='color:red'>" + abfahrt_hhmm + "</a>"}
if (ankunft_hhmm == ankunft_soll_hhmm){ankunft_hhmm = "<a style='color:green'>" + ankunft_hhmm + "</a>"}
if (ankunft_hhmm < ankunft_soll_hhmm){ankunft_hhmm = "<a style='color:red'>" + ankunft_hhmm + "</a>"}
var abfahrt_icon_hhmm = new Date(abfahrtszeitistvalue).toTimeString().replace(/.*(\d{2}:\d{2}:\d{0}).*/, "$1");
var ankunft_icon_hhmm = new Date(ankunftszeitistvalue).toTimeString().replace(/.*(\d{2}:\d{2}:\d{0}).*/, "$1");
if (abfahrt_icon_hhmm < uhrzeit_hhmm){
var produkticon = "<img src='pfeil.png' id='icon'>";
}else{var produkticon = "<img src='leeresicon.png' id='icon'>";}
if (abfahrt_icon_hhmm == uhrzeit_hhmm){
var produkticon = "<img src='ubahnicon.png' id='icon'>";
}
table += "<tr><td style='text-align:center'>" +
"<a >" + abfahrt_hhmm + produkticon + "</a>" +
"</td><td>" +
x[i].getElementsByTagName("Haltestellenname")[0].childNodes[0].nodeValue +
"</td><td style='text-align:center'>" +
"<a target='_blank' href='https://www.google.com/maps?q=" + x[i].getElementsByTagName("Latitude")[0].childNodes[0].nodeValue + "," + x[i].getElementsByTagName("Longitude")[0].childNodes[0].nodeValue + "'><grau><img src='karte.png' id='icon'></a>" + " Gl. " + gleis +
"</td></tr>";
}
document.getElementById("fahrten-tabelle").innerHTML = table;
}
</script>
<table style="width:100%" id="fahrten-tabelle"></table>
<br><br>
</body>
</html>
CSS has Even and Odd rules, you can use these to select every even or odd element of a collection.
In your case, you could use this to give the rows a different background depending on whether they are even or odd in the scope of the table:
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
<table border="1">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
Of course, if you have multiple tables and only want this applied to some of them, change the selector tr:nth-child(even|odd)
to maybe table-striped tr:nth-child(even|odd)
.
Viel Erfolg!