0

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倍前もって:)

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 に答える