Question

以下代码输出一个表，其中包含obj变量中JSON数组中的某些数据。这只是代码的一部分，但是完整版的代码已编程为在一天中的不同时间显示不同的数据。我想知道是否有人可以告诉我如何放置永久性表格标题（例如公交路线，时间，目的地）。最好不使用jQuery和一些注释也会有所帮助。

<!DOCTYPE html>
<html>
<script type="text/javascript"> 

function date_time(id) {
    date = new Date;
    year = date.getFullYear();
    month = date.getMonth();
    months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

    d = date.getDate();
        day = date.getDay();
        days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
        h = date.getHours();

    if(h<10) {
                h = "0"+h;
        }

    m = date.getMinutes();

    if(m<10) {
                m = "0"+m;
        }

    s = date.getSeconds();

    if(s<10) {
                s = "0"+s;
        }

    result = ''+days[day]+' '+months[month]+' '+d+' '+year+' '+h+':'+m+':'+s;
        document.getElementById(id).innerHTML = result;
        setTimeout('date_time("'+id+'");','1000');

    return true;
}

function early() {  
    if (d != 0 && ((h >= 5) && (h < 9))) { 

        return true;
    } 
    return false;
}

function nine() {  
    if (d != 0 && ((h >= 9) && (h < 11))) { 

        return true;
    } 
    return false;
}

function eleven() {  
    if (d != 0 && ((h >= 11) && (h < 13))) { 

        return true;
    } 
    return false;
}

function one() {
    if (d != 0 && ((h >=13) && (h < 15))) {
        return true;
    }
    return false;
}

function three() {
    if (d != 0 && ((h >=15) && (h < 17))) {
        return true;
    }
    return false;
}

function five() {
    if (d != 0 && ((h >=17) && (h < 19))) {
        return true;
    }
    return false;
}

function outofhours() {
    if (d != 0 && ((h >=19))) {
        return true;
    }
    return false;
}

function refreshAt(hours, minutes, seconds) {
var now = new Date();
var then = new Date();

if(now.getHours() > hours ||
   (now.getHours() == hours && now.getMinutes() > minutes) ||
    now.getHours() == hours && now.getMinutes() == minutes && now.getSeconds() >= seconds) {
    then.setDate(now.getDate() + 1);
}
then.setHours(hours);
then.setMinutes(minutes);
then.setSeconds(seconds);

var timeout = (then.getTime() - now.getTime());
setTimeout(function() { window.location.reload(true); }, timeout);
}
</script>


<head>
<div class="heading">
    <h1>Green Park Bus Times</h1>
</div>

<div class="stop_name">
    <h2 align="center">300 Longwater Avenue Opp</h2>
</div>

<div class="clock" align="center">
<span id="date_time"></span>
<script type="text/javascript">
    window.onload = date_time('date_time');
</script>
</div>


</head>

<body>
<br>
<br>
<p id="demo"></p>

<script>
var headings, obj, i, x = "";

if (early()) {

obj = {
  "data": [{
    "Site": "RTL",
    "Operator": "RGB",
    "LineRef": "53a",
    "DepotCode": "RGB",
    "LocationCode": "039026170002",
    "LocationName": "300 Longwater Ave",
    "ScheduledStartTime": "2018-08-07 05:12:00",
    "LiveJourneyId": "0",
    "Sequence": "10",
    "RunningBoard": "50A",
    "Duty": "1601",
    "Direction": "Outbound",
    "JourneyCode": "1",
    "VehicleCode": "",
    "DriverCode": "",
    "TimingPoint": "TimingPoint",
    "JourneyPattern": "JP649",
    "ArrivalStatus": "",
    "DepartureStatus": "",
    "ScheduledArrivalTime": "2018-08-07 05:29:00",
    "EndPoint":"Madejski Stadium"
  }, {
    "Site": "RTL",
    "Operator": "RGB",
    "LineRef": "53",
    "DepotCode": "RGB",
    "LocationCode": "039026170002",
    "LocationName": "300 Longwater Ave",
    "ScheduledStartTime": "2018-08-07 05:35:00",
    "LiveJourneyId": "0",
    "Sequence": "6",
    "RunningBoard": "50B",
    "Duty": "1602",
    "Direction": "Outbound",
    "JourneyCode": "3",
    "VehicleCode": "",
    "DriverCode": "",
    "TimingPoint": "TimingPoint",
    "JourneyPattern": "JP625",
    "ArrivalStatus": "",
    "DepartureStatus": "",
    "ScheduledArrivalTime": "2018-08-07 05:49:00",
    "EndPoint":"Lime Square"
  }]
}


x += "<table border='1'>"
for (i in obj.data) {
  x += "<tr><td>" + obj.data[i].LineRef + "</td>" + "<td>" + obj.data[i].ScheduledArrivalTime[11] + obj.data[i].ScheduledArrivalTime[12] + obj.data[i].ScheduledArrivalTime[13] + obj.data[i].ScheduledArrivalTime[14] + obj.data[i].ScheduledArrivalTime[15] + "</td>" + "<td>" + obj.data[i].EndPoint + "</td></tr>";
}

x += "</table>"
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

Answer 1

在最后的for循环之前，只需编写以下代码，

document.getElementById("demo").innerHTML = "<tr><th>Bus Route</th><th>Time</th><th>Destination</th></tr>";

希望这会有所帮助

Answer 2

设法解决-我只把下一行

x += "<tr><th>" + "Bus Route" + "</th>" + "<th>" + "Time" + "</th>" + "<th>" + "Towards" + "</tr></th>"

每次之后

x += "<table border='1'>"

我的脚本中的代码行。这可能不是最有效的解决方案，但它似乎对我有用。

JSON数据到表中-添加表标题

2 个答案: