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，因此它仍然不能正常工作。但我会把这件事告诉你。

在JS中绘制一个信息表

1 个答案: