0

我写了一个代码，从哈佛大学获取生成的 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 倍 :)

4

1 回答 1

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();

这应该足以让您从那里创建表格。

于 2012-07-18T17:19:06.747 回答