Данные JSON в таблицу - добавление заголовков таблиц

Следующий код выводит таблицу с некоторыми данными из массивов JSON в переменной obj. Это всего лишь фрагмент кода, но полная версия была запрограммирована для отображения разных данных в разное время дня. Мне было интересно, может ли кто-нибудь сказать мне, как я могу разместить постоянные заголовки таблиц (например, маршрут автобуса, время, пункт назначения). Желательно без использования 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>

В таблицах есть элемент <thead> (заголовок таблицы), содержащий элементы <tr> (строка таблицы) с элементами <th> (заголовок таблицы) внутри. Таким образом, создание заголовков аналогично созданию ячеек, но с использованием <th> вместо <td>.

— 14.08.2018 14:05

javascript arrays json html-table

14.08.2018 14:00

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 2

Перед последним циклом for просто напишите приведенный ниже код,

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

Надеюсь это поможет

14.08.2018 14:18

Удалось решить - просто поставил следующую строчку

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

после каждого

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

строка кода в моем скрипте. Вероятно, это не самое эффективное решение, но, похоже, оно работает для меня.

14.08.2018 14:18

Другие вопросы по теме

Правильный способ хранения большого количества изображений локально в приложении

Как получить все значения из многомерного массива

Найдите самый маленький и самый большой элемент в Array Angular и Typescript

Как добавить элемент в массив, используя ключ в качестве порядкового элемента в PHP

Создайте массив numpy sums из словаря с кластером и индексами в матрице

Что эквивалентно функции Presto UNNEST в Hive

JS Удалить записи из 2D-массива

Python заменяет элементы в массиве в определенном диапазоне

Array_diff в php возвращает только одно несоответствующее значение, даже если оно не дублируется

Запретить array_merge объединить массив, если один из указанных аргументов не является массивом

Данные JSON в таблицу - добавление заголовков таблиц

Ответы 2

Другие вопросы по теме

Похожие вопросы