我写了一个从Harvard Uni获取生成XML文件的代码,并将其放在下拉列表中,然后您可以从列表中选择一个课程,它将生成一个包含课程详细信息的表。
<script type="text/javascript" src="Script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$('#button').click(function () {
document.getElementById("span").style.visibility = "visible";
document.getElementById("button").style.visibility = "hidden";
$.ajax({
type: "GET",
url: "Harvard.aspx?field=COMPSCI",
success: function (data) {
var courses = data.documentElement.getElementsByTagName("Course");
var options = document.createElement("select");
$(options).change(function () {
ShowCourseDetails(this);
});
for (var i = 0; i < courses.length; i++) {
var option = document.createElement("option");
option.value = $(courses[i]).find("cat_num").text();
option.text = $(courses[i]).find("title").text();
options.add(option, null);
}
document.getElementById("selectDiv").appendChild(options);
document.getElementById("span").style.visibility = "hidden";
}
});
});
function ShowCourseDetails(event) {
// get the index of the selected option
var idx = event.selectedIndex;
// get the value of the selected option
var cat_num = event.options[idx].value;
$.ajax({
type: "GET",
url: "http://courses.cs50.net/api/1.0/courses?output=xml&&cat_num=" + cat_num,
success: function (data) {
$("#TableDiv").html(ConvertToTable(data.documentElement));
}
});
}
function ConvertToTable(targetNode) {
targetNode = targetNode.childNodes[0];
// first we need to create headers
var columnCount = 2;
var rowCount = targetNode.childNodes.length
// name for the table
var myTable = document.createElement("table");
for (var i = 0; i < rowCount; i++) {
var newRow = myTable.insertRow();
var firstCell = newRow.insertCell();
firstCell.innerHTML = targetNode.childNodes[i].nodeName;
var secondCell = newRow.insertCell();
secondCell.innerHTML = targetNode.childNodes[i].text;
}
// i prefer to send it as string instead of a table object
return myTable.outerHTML;
}
</script>
和身体:
<div id="main">
<div class="left">
<input id="button" type="button" value="Get all science courses from HARVARD"/>
<br />
<span id="span" style="visibility: hidden">Downloading courses from harvard....</span>
<div id="selectDiv"></div>
<div id="TableDiv"></div>
</div>
</div>
而我在下拉列表中得到的只是下拉列表中所有行的“未定义”,有人可以看到我写的代码的问题吗?
提前10倍:)
答案 0 :(得分:0)
工作jsFiddle:http://jsfiddle.net/3kXZh/44/
好吧,我发现了几个问题..
首先,我不会在HTML中设置“onclick”。您希望将操作层与内容层分开。
因为你还在使用jQuery,试试这个:
$('#button').click(function() {
/* function loadXMLDoc contents should go here */
});
并改变:
<input id="button" type="button" onclick="loadXMLDoc()" value="Get all sci..."/>
要:
<input id="button" type="button" value="Get all sci..." />
要解决JavaScript中的立即问题,请更改loadXMLDoc函数:
option.value = courses[i].getElementsByTagName("cat_num")[0].text;
option.text = courses[i].getElementsByTagName("title")[0].text;
到此:
option.value = $(courses[i]).find("cat_num").text();
option.text = $(courses[i]).find("title").text();
这应该足以让你从那里创建你的表。