Question

我正在开发一个简单的电视指南，供浏览器使用。

我当前的HTML使用预定时间绘制表格，并在左侧显示频道名称

我想知道使用我的XML电影数据在正确的时间将影片插入此HTML表的最佳方法

我一直在尝试使用这里的教程加载我的XML数据

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

使用此

将数据插入表格的适当位置

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

继承人我的

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;

}

关于我应该如何处理这个问题的任何建议，以及我是否使用我正在使用的资源找到了正确的想法将非常有帮助

谢谢！

Answer 1

我的建议是为每一行提供一个唯一的标识符，该标识符与XML中显示的频道名称相同（即sean_channel ...）。

在循环浏览XML数据时，使用javascript / jquery找到行，并在循环一天中的小时时使用插入HTML。如果您的列从上午9点开始，那么您需要抵消节目的持续时间，这样10 AM-11AM就意味着第二列。

对于您循环的每小时和持续时间，小时不会进入持续时间，请使用空。将XML数据的时间转换为整数，使得2.30pm变为24h相当于14.5。有了这个，您可以使用简单的数学计算偏移量。因此，如果从早上9点开始，那么上午11点开始的持续时间将是11-9 = 2。结果2将与您的计数器相关，从0开始，因此2与第3列直接匹配（不需要对计数器进行调整）。

这一切都非常简单，希望应该足以让你开始并可能考虑更精细和复杂的解决方案，例如单元格是时间标记之间的持续时间，因此单元格标题应保持对齐以匹配某个开头持续时间。更进一步，每15分钟可以关联1个细胞，依此类推。

将XML数据插入特定位置的表中

1 个答案: