Вставка XML-данных в таблицу в определенном месте

Я разрабатываю простой телегид для использования в браузерах.Вставка XML-данных в таблицу в определенном месте

Мой текущий HTML рисует таблицу с расписанию.Предусмотрена, а также отображает имена каналов на левой стороне

Я хотел бы знать, что лучший способ, чтобы вставить фильмы в этот HTML-таблицы в правильное время с помощью мои данные пленки XML

Я пытался загрузить мои данные XML с помощью учебника здесь

http://www.w3schools.com/xml/tryit.asp?filename=tryxml_display_table

и вставить данные в соответствующей части в таблице с помощью этого

http://www.w3schools.com/jsref/met_table_insertrow.asp

Heres мой

HTML код:

<!DOCTYPE html> 

    <html> 

    <!--HEADER CONTENT--> 

    <head> 
    <title>My website</title> 
    <link type="text/css" rel="stylesheet" href="style.css"/> 

    <div class="page-title"> 
     <p>TV Guide</p> 
    </div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 


</head> 


<!-- MAIN BODY --> 

<body> 

    <table class="tv-planner"> 
     <tr> 
      <th class = "information">Channel</th> 
      <th class="times">9AM</th> 
      <th class="times">10AM</th> 
      <th class="times">11AM</th> 
      <th class="times">12PM</th> 
      <th class="times">1PM</th> 
      <th class="times">2PM</th> 
      <th class="times">3PM</th> 
     </tr> 

     <tr> 
      <th class = "information">Channel 1</th> 
     </tr> 

     <tr> 
      <th class = "information">Channel 2</th> 
     </tr> 

       <tr> 
      <th class = "information">Channel 4</th> 
     </tr> 

       <tr> 
      <th class = "information">Sky One</th> 
     </tr> 

       <tr> 
      <th class = "information">Channel Five</th> 
     </tr> 


    </table> 

    <button onclick="myFunction()">Update TV-guide</button> 

    <script> 

     function myFunction() { 

      // Code to read XML file + insert into existing table 
     } 

    </script>

код XML:

<MOVIE_DATA> 

    <MOVIE> 
     <movie_id="1"> 
     <channel_1> 
      <name>Simpsons</name> 
      <start_time>10.00am</start_time> 
      <end_time>1.00pm</end_time> 
     </sean_channel> 
    </MOVIE> 

    <MOVIE> 
     <movie_id="2"> 
     <roger_channel> 
      <name>Suits</name> 
      <start_time>9.00am</start_time> 
      <end_time>12.00pm</end_time> 
     </roger_channel> 
    </MOVIE> 

    <MOVIE> 
     <movie_id="3"> 
     <sean_channel> 
      <name>Mighty Boosh</name> 
      <start_time>1.00pm</start_time> 
      <end_time>2.00pm</end_time> 
     </sean_channel> 
    </MOVIE> 

</MOVIE_DATA>

CSS:

.main-area{ 
    font-style: italic; 
} 


.page-title{ 

    text-align: center; 
    font-style: italic; 
    font-size: 50px; 
    text-shadow: hoff voff blur #000; 

} 

.times{ 
    width: 11%; 
    text-align: center; 
    color: #FF0000; 
    background-color: #d3d3d3; 
    border: 1px solid black; 

} 

.tv-planner{ 
    width: 100%; 
    border: 1px solid black; 
} 

.information{ 
    width: 15%; 
    border: 1px solid black; 
    padding-right: 10px; 
    padding-left: 10px; 
    padding-top: 15px; 
    padding-bottom: 15px; 
    background-color: #d3d3d3; 

}

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

Спасибо !

источник

2015-07-30 does_not_compute

проанализировать XML-адрес таким же образом, но вставлять строки вместо использования 'document.write', который уничтожит все на странице после загрузки страницы – charlietfl

Мой совет - предоставить каждой строке уникальный идентификатор, равный имени канала, как указано в вашем XML (то есть sean_channel ...).

Когда вы циклически просматриваете данные XML, найдите строку, используя javascript/jquery, и используйте вставку HTML, когда вы совершаете цикл через часы дня. Если столбцы начинаются с 9 утра, вам необходимо компенсировать продолжительность шоу, так что 10 AM-11AM будет означать второй столбец.

За каждый час, когда вы проходите цикл и продолжительность, час не попадает в продолжительность, используйте пустой. Преобразуйте данные XML за время в целое число, так что 2.30pm станет 24-часовым эквивалентом 14.5. С помощью этого вы можете использовать простую математику для вычисления смещения. Поэтому, если начать с 9 утра, то длительность начала 11 утра будет 11-9 = 2. Результат 2 будет относиться к вашему счетчику при прохождении цикла, начиная с 0, так что 2 непосредственно соответствует 3-му столбцу (для счетчика не требуется настройка).

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

источник

2015-07-30 19:49:57

Вставка XML-данных в таблицу в определенном месте

ответ

Смежные вопросы