JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

<select id="bhfselect"></select>
<table id="output">
  <tbody>
	  <tr id="trhead">
			<th>Abfahrt</th>
			<th>Linie</th>
			<th>Zugnummer</th>
      <th>Ziel</th>
			<th>Status</th>
		</tr>
    <tr id="tfooter">
      <td colspan="3"><span id="past" class="nav"></span>  <span id="future" class="nav"></span></td>
      <td colspan="2"></td>
    </tr>
  </tbody>
</table>

CSS

tr th {text-align:left;}
#output tr.init {display:none;}
#output tr.time.past,#output tr.time.future {display:none !important;}
#output tr.time.past.show,#output tr.time.future.show {display:table-row !important;}

span.nav {cursor:pointer;display:none;}

JavaScript

(function ($) {
$(document).ready(function() {
//GET CURRENT DATE
var fullDate = new Date();
var twoDigitMonth=((fullDate.getMonth()+1)>=10)? (fullDate.getMonth()+1) : '0' + (fullDate.getMonth()+1);  
var twoDigitDate=((fullDate.getDate())>=10)? (fullDate.getDate()) : '0' + (fullDate.getDate());
var currentDate = twoDigitDate + "." + twoDigitMonth + "." + fullDate.getFullYear();
console.log(currentDate);

var datetime;
function lastupdate() {
  var currenttime = new Date();
  		var minutes = currenttime.getMinutes();
      minutes = minutes > 9 ? minutes : '0' + minutes;
      datetime = currenttime.getHours() + ":" + minutes;
  //console.log(datetime);
	$("#output #tfooter span.nav").fadeOut(50);
  $("#tfooter td:last-child").text("Stand: " + currentDate + ", " + datetime + " Uhr");
}

//BAHNHÖFE AJAX READ XML AND OUTPUT TO HTML AS SELECT
$.ajax({
    url: "https://datnet-desag.etc-consult.de/datnet-desag/xml?bhf=?&id_prod=RB",
    type: "GET",
    dataType: "html",
    success: function(data) {
		var xml = $.parseXML(data)
    $(xml).find('bhf').each(function()
    {
    		//WICHTIG
    		var selectid = $(this).find('id').text();
        var selectname = $(this).find('name').text();
        $("#bhfselect").append("<option value='" + selectid + "'>" + selectname + "</option>");
    }); //each function bahnhöfe
    
    //Bahnhof vorselektiert
		$("#bhfselect option[value='WKY']").prop({defaultSelected: true});
    
    }, //success bahnhöfe
    error: function(jqXHR, textStatus, errorThrown){
     	console.log("error selectmenu");
    }
}); //ajax function bahnhöfe

//TABELLE SORTIEREN NACH ZEIT
function tablesort() {

  var sortAsc = 'asc', // ASC or DESC
    $table = $('#output'), // cache the target table DOM element
    $rows = $('tbody > tr', $table); // cache all rows from the target table body

  $rows.sort(function(a, b) {

    var keyA = $('td', a).text();
    var keyB = $('td', b).text();

    if (sortAsc == 'asc') {
      //return (keyA > keyB) ? 1 :...