javascript - 将(.odd + .even)添加到XML应用程序

如何使用.odd和设计表。甚至使.odd灰色和.even白色。而且我想向表中添加一个自动刷新脚本，但是我不想重新加载整个html页面。那怎么可能？如果您能找到解决方案，那将非常好，
它是一个XML应用程序
谢谢

我需要一些文本来发布问题：

<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具有偶数和奇数规则，您可以使用这些规则选择集合中的每个偶数或奇数元素。

在您的情况下，您可以使用此方法为行赋予不同的背景，具体取决于表范围中的行是偶数还是奇数：

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>

当然，如果您有多个表，并且只希望将此表应用于某些表，请将选择器tr:nth-child(even|odd)更改为table-striped tr:nth-child(even|odd)。

Viel Erfolg！

关于javascript - 将(.odd + .even)添加到XML应用程序，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50190943/