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

Question

我如何设计带有 .odd 和的表格。甚至使.odd 灰色和.even 白色。我想在表中添加一个自动刷新脚本，但我不想重新加载完整的 html 页面。这怎么可能？如果您能找到解决方案，那就太好了，它是一个 XML 应用程序谢谢

我需要一些文字来发布问题: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>

Answer 1

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) 更改为 maybe table-striped tr :nth-child(偶数|奇数)。

维尔·埃尔福格!