Добавить (.odd + .even) в приложение XML

Question

Как мне спроектировать таблицу с .odd и. даже сделать. ODD серым и. даже белым. И я хочу добавить скрипт автообновления в таблицу, но я не хочу перезагружать полную HTML-страницу. Как это возможно? Было бы очень хорошо, если бы вы нашли решение, Это приложение XML Спасибо

Мне нужен текст, чтобы отправить вопрос: bwrebgfisdbkgbvfhewsbdgbfvewbfdsbgfuivbcfhiesbdchgvbchfedbghfvc fhdcv iuewbasidbguifreiudsgfvuieisbygkfvfifgfgfgfgwgwgwgwfgwgwfdw0d6

<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) на table-striped tr:nth-child(even|odd).

Виль Эрфолг!