我有以下XML数据代表一门课程，现在我的xml中有很多课程元素，我需要循环播放所有内容，并在html表中的正确位置显示时间和课程代码。
<course code="Philo">
<dayofWeek> Monday
<hoursofClass>
<hour>0800</hour>
<hour>0900</hour>
</hoursofClass>
<roomNumber>B2029</roomNumber>
</dayofWeek>
<dayofWeek> Wednesday
<hourofClass>
<hour>1000</hour>
<hour>1100</hour>
</hourofClass>
<roomNumber>M3045</roomNumber>
</dayofWeek>
</course>
我需要及时插入正确的时间表。我的HTML表是。我是编程新手，想要一些建议。我的xml是否需要重新格式化？
<table id="myTable">
<!--DATE HEADING-->
<tr>
<td></td>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
</tr>
<tr>
<td>800</td>
<td id = "m800"></td>
<td id ="t800"></td>
<td id = "w800"></td>
<td id="th800"></td>
<td id ="f800"></td>
</tr>
<tr>
<td>900</td>
<td id = "m900"></td>
<td id ="t900"></td>
<td id = "w900"></td>
<td id="th900"></td>
<td id ="f900"></td>
</tr>
<tr>
<td>1000</td>
<td id = "m1000"></td>
<td id ="t1000"></td>
<td id = "w1000"></td>
<td id="th1000"></td>
<td id ="f1000"></td>
</tr>
答案 0 :(得分：0)
由于我们希望您自己学习如何编写代码，我（希望）会为您提供开始使用所需的所有相关部分。
<强>步骤：
day前缀;否则，您必须在JavaScript代码中使用switch case将日期名称转换为前缀。XMLHttpRequest，但要使用像JQuery这样的库，加载数据就像这样简单：$.ajax('PATHTOXML.xml', { success: function(data) { // your XML code will be available inside the "data" variable } });
循环遍历已加载的数据。访问XML对象时，以下函数可能很方便：
data.children[0].getAttributeNode("code").value将返回＆＃34; Philo＆＃34;。data.children[0].hasAttribute("code")将为同一条目返回TRUE。data.children.length可用于检查元素的数量（或者在字符串或数字的情况下包含值的长度），它将为基本元素返回1。 data.getElementsByTagName("course")[0].getElementsByTagName("dayofWeek")将使用XML标记名称＆＃34; course＆＃34;访问第一个元素（JS使用0作为计数的基础）。然后将返回标签名称的值＆＃34; dayofWeek＆＃34;
将数据添加到您的表格中。我将使用静态代码示例（没有任何错误处理，代码中应该有所不同）来说明如何完成此操作：
var courseName= data.children[0].getAttributeNode("code").value; var dayName= data.getElementsByTagName("course")[0].getElementsByTagName("dayofWeek")[0].childNodes[0].textContent; var start= data.getElementsByTagName("course")[0].getElementsByTagName("dayofWeek")[0].getElementsByTagName("hoursofClass")[0].getElementsByTagName("hour")[0].textContent; var end= data.getElementsByTagName("course")[0].getElementsByTagName("dayofWeek")[0].getElementsByTagName("hoursofClass")[0].getElementsByTagName("hour")[1].textContent; var room= data.getElementsByTagName("course")[0].getElementsByTagName("dayofWeek")[0].getElementsByTagName("roomNumber")[0].textContent; document.getElementById(dayName+start).innerHTML += courseName + ' in ' + room + '<br />' + start + ' - ' + end + '<br />';
如果要循环结构，可以使用类似于以下内容的代码：
// accesses the first element matching the tag "course"
var courseData= data.getElementsByTagName("course")[0];
// retrieves the node attribute value of attribute "code"
var courseName= courseData.getAttributeNode("code").value;
var courseDaysData= courseData.getElementsByTagName("dayofWeek");
// loop over all course days below one course
for (var icd=0; icd<courseDaysData.length; icd++) {
// loop over your days
}
一般提示：
console.log(VARIABLE);，即console.log(dayName);。您将在所述开发人员工具中找到输出。关于您的XML：
如前所述，HTML和XML中的日期名称（或前缀）应该匹配，否则您需要一个＆＃34;切换案例＆＃34;。除此之外，您当前的XML代码只允许您在一个房间中有一个班级的不同时间，我不知道这是否是您想要的。
如果您需要更多解释，请与我们联系。好好学习！
答案 1 :(得分：0)
希望这可以回答您的问题只需复制＆amp;粘贴到HTML文件中进行测试。
var XML = ''
+'<course id="Philo">'
+' <dayofWeek>Monday'
+' <hoursofClass>'
+' <hour>8</hour>'
+' <hour>9</hour>'
+' </hoursofClass>'
+' <roomNumber>B2029</roomNumber>'
+' </dayofWeek>'
+''
+' <dayofWeek>Wednesday'
+' <hoursofClass>'
+' <hour>10</hour>'
+' <hour>11</hour>'
+' </hoursofClass>'
+' <roomNumber>M3045</roomNumber>'
+' </dayofWeek>'
+'</course>';
XML = (new DOMParser()).parseFromString(XML, "text/xml");
console.log(XML);
console.log(XML.getElementsByTagName("course"));
XML.getElementsByTagName("course");
for(N_01=0; N_01<XML.getElementsByTagName("course").length; N_01++){
console.log(XML.getElementsByTagName("course")[N_01]);
DAY_OF_WEEK = XML.getElementsByTagName("course")[N_01].getElementsByTagName('dayofWeek');
///
///
///
for(N_02=0; N_02<DAY_OF_WEEK.length; N_02++){
CLASS_HOUR = DAY_OF_WEEK[N_02].getElementsByTagName('hoursofClass');
CLASS = DAY_OF_WEEK[N_02].getElementsByTagName('roomNumber');
///
///
//
for(N_03=0; N_03<CLASS_HOUR.length; N_03++){
///
///
///
HOURS = CLASS_HOUR[N_03].getElementsByTagName('hour');
for(N_04=0; N_04<HOURS.length; N_04++){
var ROW = document.getElementById('TIME_'+HOURS[N_04].innerHTML);
var CELL= '';
if(DAY_OF_WEEK[N_02].innerHTML.search('Monday')!=-1){ CELL=1; }
if(DAY_OF_WEEK[N_02].innerHTML.search('Tuesday')!=-1){ CELL=2; }
if(DAY_OF_WEEK[N_02].innerHTML.search('Wednesday')!=-1){CELL=3; }
if(DAY_OF_WEEK[N_02].innerHTML.search('Thursday')!=-1){ CELL=4; }
if(DAY_OF_WEEK[N_02].innerHTML.search('Friday')!=-1){ CELL=5; }
ROW.cells[CELL].innerHTML = CLASS[N_03].innerHTML;
}//
///
///
}//
///
///
}//
///
///
}#myTable TD{text-align:center; padding:5px;}
#myTable .td_1{text-align:right; padding:5px; padding-left:15px;}<table id="myTable" cellspacing=1 cellpadding=1 border=1>
<!--DATE HEADING-->
<tr><td></td>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
<tr ID=TIME_8><td class=td_1>8</td>
<td id = "m800"></td>
<td id ="t800"></td>
<td id = "w800"></td>
<td id="th800"></td>
<td id ="f800"></td>
<tr ID=TIME_9><td class=td_1>9</td>
<td id = "m800"></td>
<td id ="t800"></td>
<td id = "w800"></td>
<td id="th800"></td>
<td id ="f800"></td>
<tr ID=TIME_10><td class=td_1>10</td>
<td id = "m800"></td>
<td id ="t800"></td>
<td id = "w800"></td>
<td id="th800"></td>
<td id ="f800"></td>
<tr ID=TIME_11><td class=td_1>11</td>
<td id = "m800"></td>
<td id ="t800"></td>
<td id = "w800"></td>
<td id="th800"></td>
<td id ="f800"></td>
</TABLE>