Question

<!Doctype html?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css\bootstrap.min.css" rel="stylesheet">
<link href="css\styles.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js\bootstrap.js"></script>
<script>
jQuery(document).ready(function() {
    jQuery('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = jQuery(this).attr('href');
        jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
        jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
        e.preventDefault();
     });
});</script>
<script>
$(document).ready(function(){
  $.ajax({
  type: "GET",
  url: "daily1.xml", 
  dataType: "xml",
  success: function(xml) {  
   $(xml).find('Programme').each(function(){    
   var ChannelName = $(this).find('ChannelName').text();
    var ProgrammeName = $(this).find('ProgrammeName').text();
    var StartTime = $(this).find('StartTime').text();
    var EndTime = $(this).find('EndTime').text();
    $('<tr></tr>').html('<th>'+ChannelName+'</th><td>'+ProgrammeName+'</td><td>'+StartTime+'</td>     <td>'+EndTime+'</td>').appendTo('#chart');
   });
  }
 }); 
});
</script>
</head>
<body>
<br>
<img src="banner.jpg" alt="banner" style="width:650;height:175">
<h4><b>Your guide, to your TV</h4></b>
<div class="tabs">
    <ul class="tab-links">
        <li class="active"><a href="#tab1">Monday</a></li>
        <li><a href="#tab2">Tuesday</a></li>
        <li><a href="#tab3">Wednesday</a></li>
        <li><a href="#tab4">Thursday</a></li>
        <li><a href="#tab5">Friday</a></li>
        <li><a href="#tab6">Saturday</a><li>
        <li><a href="#tab7">Sunday</a></li>
    </ul>

    <div class="tab-content">
        <div id="tab1" class="tab active">
        <p>Daily 1</p>
    <br>
    <table id="chart">
    <tr><td></td>
    <th>07.00</th>
    <th>08.00</th>
    <th>09.00</th>
    <th>10.00</th>
    <th>11.00</th>
    <th>12.00</th>
    <th>13.00</th>
    <th>14.00</th>
    <th>15.00</th>
    <th>16.00</th>
    <th>17.00</th>
    <th>18.00</th>
    <th>19.00</th>
    <th>20.00</th>
    <th>21.00</th>
    <th>22.00</th>
    <th>23.00</th>
    <th>00.00</th>
    </tr>
    </table>
    </div>
    <div id="tab2" class="tab">
    <p>Content1</p>
    </div>
    <div id="tab3" class="tab">
    <p>Content2</p>
    </div>
    <div id="tab4" class="tab">
    <p>Content3</p>
    </div>
    <div id="tab5" class="tab">
    <p>Content4</p>
    </div>
    <div id="tab6" class="tab">
    <p>Content5</p>
    </div>
    <div id="tab7" class="tab">
    <p>Content6</p>
    </div>
</div>
</div>

请参阅上面的代码。正在从外部XML文件中读取数据。数据当前出现在垂直列表中，但我希望它在表格中水平显示。（即程序名称专门出现在水平列表中）

任何帮助将不胜感激。

Answer 1

这是因为你没有附加在正确的地方。试试这个：

$('#chart').append('<tr><td>'+ChannelName+'</td><td>'+ProgrammeName+'</td><td>'+StartTime+'</td>     <td>'+EndTime+'</td></tr>');

表中的数据显示为水平而非垂直

1 个答案: