用JS绘制信息表

Question

我有这段代码使用哈佛 API，它将所有 CS 课程都加载到下拉列表中。 选择一门课程后，我想绘制一张包含课程所有信息的表格，但由于某种原因，我让它工作，该功能没有触发（我认为这是问题所在）。 有人能看出我写的函数的问题吗？

<script type="text/javascript">
         function loadXMLDoc() {
             document.getElementById("span").style.visibility = "visible";
             document.getElementById("button").style.visibility = "hidden";
             $.ajax({
                 type: "GET",
                 url: "http://courses.cs50.net/api/1.0/courses?field=COMPSCI&output=xml",
                 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";
                 }
             });
         }
         //Get the Course information
         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));
                 }
             });
         }
         //Draw The Table
         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 class="left">
                   <input id="button" type="button" onclick="loadXMLDoc()" value="Get all Coputer Science Courses From Harvard"/>
                   <br />
                   <span id="span" style="visibility: hidden">Downloading Courses From Harvard.. Please Wait.. </span>
                   <div id="selectDiv"></div>
                   <div id="TableDiv"></div>
            </div>

提前 10 倍。

Answer 1

为了让它调用ShowCourseDetails，我更改了这段代码：

$(options).change(function () {
    ShowCourseDetails(this);
});

到这里：

$('select').change(function () {
    ShowCourseDetails(this);
});

并将其移至回调函数的底部，如下：

document.getElementById("span").style.visibility = "hidden";

以便在添加事件后将事件连接到 DOM 元素。然后我不得不更改此代码：

$("#TableDiv").html(ConvertToTable(data.documentElement));

对此，由于 documentElement 似乎没有被定义：

$("#TableDiv").html(ConvertToTable(data.childNodes[0]));

然后允许我在您的 ConvertToTable 函数中删除这一行：

targetNode = targetNode.childNodes[0];

它仍然不能正常工作，因为您没有正确浏览返回的 XML。但我会留给你解决这个问题。