动态生成的锚HREF调用函数不起作用

时间:2011-04-12 02:25:31

标签: javascript html xml dynamic html-table

我很抱歉,如果已经提出这样的问题,但我已经查看了“相关问题”,我认为这里的任何内容都与我的相符,所以请在我尝试提出我的问题以及如何我会继续这样做,所以我走了。

好的,我会把你的截图推荐给你。我的两个表是使用Javascript生成的,一个是静态的,我没有在listModulesWithinScene表中注释掉tbody标签。

http://img852.imageshack.us/i/haildstabletable.jpg/(点击链接查看图片)

这是我的HTML代码的简化版本,适合那些感兴趣的人。我对这个网站很陌生,尽管我从搜索引擎(谷歌)潜入这里。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href='http://fonts.googleapis.com/css?family=Josefin+Sans:100,regular' rel='stylesheet'
          type='text/css' />
    <link href="cssHomeAutomaionInterface.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="Scripts/SwitchContent.js"></script>
    <script type="text/javascript" src="Scripts/ScrollingImagesInHeader.js"></script>
    <script type="text/javascript" src="Scripts/XMLReaderWriter.js"></script>
    <script type="text/javascript" src="Scripts/Main.js"></script>
    <script type="text/javascript" src="Scripts/PageSpecific/Home.js"></script>
</head>
<body>
    <!-- ... -->
            <div id="home" class="container">
                <div id="menuHome" class="submenu">

                </div>
                <div id="contentHome" class="content">
                    <h1>Home Page</h1>
                    <div id="moduleListArea">
                        <table id="listModules" class="data">
                            <caption>Lights and Devices</caption>
                            <thead>
                                <tr>
                                    <th style="width: 100px;">Module ID#</th>
                                    <th>Module Name</th>
                                    <th style="width: 60px;">Status</th>
                                    <th style="width: 150px">Action</th>
                                </tr>
                            </thead>
                            <!--<tbody>
                                <tr style="color: Green;" title="Dimmer">
                                    <th>AB.CD.EF</th>
                                    <td>2x Floor Lamp</td>
                                    <td>75%</td>
                                    <td>
                                        <a href="#">Toggle</a>
                                        <div style="float: right;">
                                            <input style="width: 40px;" id="module1" value="75" />
                                            <a href="#">Set</a>
                                        </div>
                                    </td>
                                </tr>
                                <tr style="color: Blue;" title="Switch">
                                    <th>AB.CD.EE</th>
                                    <td>Bedside Fan</td>
                                    <td>ON</td>
                                    <td>
                                        <a href="#">Toggle</a>
                                    </td>
                                </tr>
                            </tbody>-->
                        </table>
                    </div>
                    <div id="sceneListArea" style="width: 50%; float: left;">
                        <table id="listScenes" class="data">
                            <caption style="text-align: left;">Scenes</caption>
                            <thead>
                                <tr>
                                    <th>Scene Name</th>
                                    <th style="width: 80px">Action</th>
                                </tr>
                            </thead>
                            <!--<tbody>
                                <tr>
                                    <td>Welcome Home</td>
                                    <td><a href="#">Toggle</a></td>
                                </tr>
                                <tr>
                                    <td>All Lights Off</td>
                                    <td><a href="#">Toggle</a></td>
                                </tr>
                            </tbody>-->
                        </table>
                    </div>
                    <div id="modulesWithinSceneListArea"
                         style="width: 50%; float: right;">
                        <table id="listModulesWithinScene" class="data">
                            <caption style="text-align: right;">Lights and Devices Within Scene</caption>
                            <thead>
                                <tr>
                                    <th style="width: 100px;">Module ID#</th>
                                    <th>Scene Name</th>
                                    <th style="width: 50px">Level</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>1</th>
                                    <td>2x Floor Lamp</td>
                                    <td>50%</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- ... -->
</body>
</html>
</code>

现在,让我继续描述我的问题。

所以无论如何,我想调用一个代码部分的函数:

// Create a new anchor tag and name it "List."
var a_set = document.createElement("a");
a_set.href = "javascript:ListAllModulesWithinScene(listScenes_row" + r +
    "_toggle";<br />
a_set.id = "listScenes_row" + r + "_set";
a_set.appendChild(document.createTextNode("List"));

我希望javascript:ListAllModulesWithinScene(...)在引号内调用PageSpecific / Home.js中的函数(ListAllModulesWithinScene(sceneName)),但如果单击List链接则没有任何反应;到目前为止,它没有用。这是我试图打电话的功能。

function ListAllModulesWithinScene(sceneName)
{alert("test");
    /* The part of the code that I took out fills up the table with the list of modules
        that are part of the scene, each module having different levels/settings. */
}

预期的结果是我想看到警告消息框,只是为了确保它在我调用代码生成数据行之前有效,比如说...

function ListAllModulesWithinScene(sceneName)
{
    /*listModulesWithinScene = document.getElementById("listModulesWithinScene");

    // Delete the tbody tag if it does not exist and create a enw tbody tag.
    if(listModulesWithinScene.getElementsByTagName("tbody") != null)
        listModulesWithinScene.removeChild("tbody");
    var listModulesWithinScene_tBody = document.createElement("tbody");

    var xmlRows = xmlObj.childNodes[2].getElementsByTagName("Scene");

    for (var r = 0; r < xmlRows.length; r++)
    {
        if (xmlRows[r].getAttribute("name") == sceneName)
        {
            var moduleRow = xmlRows[r].getElementsByTagName("Module");
            if (moduleRow.length > 0)
            {
                var row = document.createElement("tr");
                for (var msr = 0; msr < moduleRow.length; msr++)
                {
                    var moduleRow2 = xmlObj.childNodes[1].getElementsByTagName("Module");
                    for (var mr = 0; mr < xmlRow2.length; mr++)
                    {
                        if (moduleRow[mr].getAttribute("id") ==
                            xmlObj.childNodes[1].childNodes[mr].getAttribute("id"))
                        {
                            var td_id = document.createElement("th");
                            td_id.appendChild(
                                document.createTextNode(moduleRow.getAttribute("id")));
                            td_id.setAttribute("id", "listModulesFromScene_row" + r + 
                                "_id");
                            row.appendChild(td_id);

                            var td_name = document.createElement("td");
                            td_name.appendChild(
                                document.createTextNode(moduleRow2.getAttribute("name")));
                            td_name.setAttribute("id", "listModulesFromScene_row" + r + 
                                "_name");
                            row.appendChild(td_name);

                            var td_level = document.createElement("td");
                            td_level.appendChild(
                                document.createTextNode(moduleRow.getAttribute("level")));
                            td_level.setAttribute("id", "listModulesFromScene_row" + r + 
                                "_level");
                            row.appendChild(td_level);
                        }
                    }
                }
            }
        }
    }
    listModulesWithinScene_tBody.appendChild(row);
    listModulesWithinScene.appendChild(listModulesWithinScene_tBody);*/
}

为了帮助更好地理解我的表格生成方式,我想发布我的整个代码。我可以提供有关我的问题的更多详细信息,但这是我现在可以提供的所有内容。

这是我目前拥有的XMLReaderWriter.js文件。

/ * 在加载和保存XML文件时,尝试保持XML文件的有序性是有帮助的 并且格式良好,所以最好不要修改XML文件,除非你知道你在做什么。

XML文件的结构如下:

<?xml version="1.0" encoding="utf-8" ?>
<HomeAutomationInterface>
<Setup>
<Location longitude="" latitude="" />
</Setup>
<Modules>
<!-- The first row is an example. -->
<Module id="1" name="module name" level="ON" type="dimmer">
<!-- ... -->
</Modules>
<Scenes>
<!-- the first row is an example. It can contain multiple modules. -->
<scene name="Scene Name">
<module id="1" level="50">
<module id="2" level="60">
<!-- ... -->
</scene>
<!-- ... -->
</Scenes>
<Timers>
<!-- The following four rows are an example. For DST, sunrise and sunset
is dependent in longitude and latitude. How this works is this:

1. Go to this website and enter your address information.
http://stevemorse.org/jcal/latlon.php

2. Go here and enter your today's date, followed by longitude and latitude,
and time zone: http://www.weatherimages.org/latlonsun.html

3. You should get your information related to sunrise and sunset. It should
look like this:

Thursday 
10 March 2011         Universal Time - 5h            

SUN
Begin civil twilight      06:30                 
Sunrise                   06:54                 
Sun transit               12:48                 
Sunset                    18:42                 
End civil twilight        19:06

Now that's how you get your times for your sunruse and sunset.
-->
<timer name="Timer Name 1" type="regular">
<regular time="hour:minute:second:millisecond">
<module id="1" level="50">
<!-- ... -->
</regular>
</timer>
<timer name="Timer Name 2" type="regular">
<regular time="hour:minute:second:millisecond">
<scene name="Scene Name">
<!-- ... -->
</regular>
</timer>
<timer name="Timer Name 3" type="DST">
<DST occour="sunrise|sunset" offsetDir="later|sooner"
offset="hour:minute:second:millisecond">
<module id="1" level="75">
<!-- ... -->
</DST>
</timer>
<timer name="Timer Name 4" type="DST">
<DST occour="sunrise|sunset" offsetDir="later|sooner"
offset="hour:minute:second:millisecond">
<scene name="Scene Name">
<!-- ... -->
</DST>
</timer>
<!-- ... -->
</Timers>
</HomeAutomationInterface>

It's a long documentation, but it helps to understand what this XML structure is all about.
*/

// Not for Internet Explorer 6 or below.
var xmlDoc;
var xmlObj;

// For HTML tables (<table>)
var listModules;
var listScenes;
var listModulesWithinScene;

// For HTML text boxes
var inputLongitude;
var inputLatitude;

function LoadXML()
{
    // ActiveXObject will have to be checked first to see if it's defined. Otherwise, if you
    // try to check XMLHttpRequest first, even if Internet Explorer supports it, you will get
    // "Access Denied" in Internet Explorer and perhaps not in Firefox.
    if (window.ActiveXObject)
    {
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = false;
        xmlDoc.load("HomeAutomationInterface.xml");
        PopulateFromXML();
    }
    else
    {
        // If this is the only code in this function, then you will need to put all your
        // project in the server, since Internet Explorer has a "Same Origin Policy" which
        // I believe that the open method with "GET" causes a problem in Internet Explorer
        // but did not cause a problem in Firefox. In order to rectify the problem, the code
        // inside if(window.ActiveXObject) makes use of ActiveX.
        xmlDoc = new XMLHttpRequest();
        xmlDoc.open("GET", "HomeAutomationInterface.xml", null)
        xmlDoc.send(null);
        if (xmlDoc.status == 200)
        {
            xmlDoc = xmlDoc.responseXML;
            PopulateFromXML();
        }
    }
}

function PopulateFromXML()
{
    listModules = document.getElementById(
        "listModules").getElementsByTagName("tbody");

    // Gather the text fields for location data.
    inputLongitude = document.getElementById("inputLongitude")
    inputLatitude = document.getElementById("inputLatitude")

    // Firefox's DOM Parser treats whitespaces as text nodes, including
    // line breaks.
    removeWhitespace(xmlDoc.documentElement);

    // Send the document's root element to the XML Object variable.
    xmlObj = xmlDoc.documentElement;

    // Perform the checks and populate the tables
    // and any other elements that are needed.
    if (xmlObj.tagName == "HomeAutomationInterface")
    {
        // Check to be sure the first node is the "Setup" node. It contains the
        // location node.
        if ((xmlObj.childNodes[0].tagName == "Setup") &&
            (xmlObj.childNodes[0].childNodes[0].tagName == "Location"))
        {
            // Copy the data from one of the attributes to the respective text boxes.
            inputLongitude.value = xmlObj.childNodes[0]
                .childNodes[0].getAttribute("longitude");
            inputLatitude.value = xmlObj.childNodes[0]
                .childNodes[0].getAttribute("latitude");
        }
        // The second node within the root element is Modules node.
        // This will be implemented.
        if (xmlObj.childNodes[1].tagName == "Modules")
        {
            //TODO: Implement the XML-to-Table translation that gets info
            // about modules.
            listModules = document.getElementById("listModules");
            var listModules_tBody = document.createElement("tbody");
            var xmlRows = xmlObj.childNodes[1].getElementsByTagName("Module");

            for (var r = 0; r < xmlRows.length; r++)
            {
                var xmlRow = xmlRows[r];
                var row = document.createElement("tr");

                var td_id = document.createElement("th");
                td_id.appendChild(document.createTextNode(xmlRow.getAttribute("id")));
                td_id.setAttribute("id", "listModules_row" + r + "_id");
                row.appendChild(td_id);

                var td_name = document.createElement("td");
                td_name.appendChild(document.createTextNode(xmlRow.getAttribute("name")));
                td_name.setAttribute("id", "listModules_row" + r + "_name");
                row.appendChild(td_name);

                var td_level = document.createElement("td");
                td_level.appendChild(document.createTextNode(xmlRow.getAttribute("level")));
                td_level.setAttribute("id", "listModules_row" + r + "_level");
                row.appendChild(td_level);

                if (xmlRow.getAttribute("type") == "dimmer")
                {
                    row.style.color = "Green";

                    // Create a new table cell for a dimmer. This will include a toggle,
                    // a text box, and a set button.
                    var td_dimmer = document.createElement("td");

                    // Create a new anchor tag and, set the href to #, and name it "Toggle."
                    var a_toggle = document.createElement("a");
                    a_toggle.href = "#";
                    a_toggle.id = "listMoudles_row" + r + "_dimmer_toggle";
                    a_toggle.appendChild(document.createTextNode("Toggle"));

                    td_dimmer.appendChild(a_toggle);

                    // Create a new div element to hold a text box and a set button.
                    var div_floatright = document.createElement("div");
                    div_floatright.style.float = "right";

                    // Create a new text box and append it to the div element.
                    var input_level = document.createElement("input");
                    input_level.type = "text";
                    input_level.name = "listModules_row" + r + "_inputLevel";
                    input_level.id = "listModules_row" + r + "_inputLevel";
                    input_level.style.width = "40px";

                    div_floatright.appendChild(input_level);

                    // Create a new anchor tag, set the href to #, and name it "Set."
                    var a_set = document.createElement("a");
                    a_set.href = "#";
                    a_set.id = "listMoudles_row" + r + "_dimmer_set";
                    a_set.appendChild(document.createTextNode("Set"));

                    div_floatright.appendChild(a_set);

                    // Append the div element to the table cell.
                    td_dimmer.appendChild(div_floatright);

                    // Finally, append the table cell to the row.
                    row.appendChild(td_dimmer);
                }
                else if (xmlRow.getAttribute("type") == "switch")
                {
                    row.style.color = "Blue";

                    // Create a new table cell for a dimmer. This will include a toggle,
                    // a text box, and a set button.
                    var td_switch = document.createElement("td");

                    // Create a new anchor tag and, set the href to #, and name it "Toggle."
                    var a_toggle = document.createElement("a");
                    a_toggle.href = "#";
                    a_toggle.id = "listMoudles_row" + r + "_dimmer_toggle";
                    a_toggle.appendChild(document.createTextNode("Toggle"));

                    td_switch.appendChild(a_toggle);

                    row.appendChild(td_switch);
                }
                else
                {
                    row.style.color = "Black";
                    row.appendChild(document.createTextNode("No actions available."));
                }

                listModules_tBody.appendChild(row);
            }
            listModules.appendChild(listModules_tBody);

            // Uncomment this code and run the example.
            //alert(listModules_row0_name.textContent);
        }
        // The third node within the root element is Scenes node.
        // You need modules in order for scenes to work.
        // This will be implemented.
        if (xmlObj.childNodes[2].tagName == "Scenes")
        {
            listScenes = document.getElementById("listScenes");
            var listScenes_tBody = document.createElement("tbody");
            var xmlRows = xmlObj.childNodes[2].getElementsByTagName("Scene");

            for (var r = 0; r < xmlRows.length; r++)
            {
                var xmlRow = xmlRows[r];
                var row = document.createElement("tr");

                var td_name = document.createElement("td");
                td_name.appendChild(document.createTextNode(xmlRow.getAttribute("name")));
                td_name.setAttribute("id", "listScenes_row" + r + "_name");
                row.appendChild(td_name);

                row.appendChild(td_name);

                var td_actions = document.createElement("td");

                // Create a new anchor tag and name it "Toggle."
                var a_toggle = document.createElement("a");
                a_toggle.href = "#";
                a_toggle.id = "listScenes_row" + r + "_toggle";
                a_toggle.appendChild(document.createTextNode("Toggle"));

                // Create a new anchor tag and name it "List."
                var a_set = document.createElement("a");
                a_set.href = "javascript:ListAllModulesWithinScene(listScenes_row" + r +
                    "_toggle";
                a_set.id = "listScenes_row" + r + "_set";
                a_set.appendChild(document.createTextNode("List"));

                td_actions.appendChild(a_toggle);
                td_actions.appendChild(a_set);

                row.appendChild(td_actions);

                listScenes_tBody.appendChild(row);
            }
            listScenes.appendChild(listScenes_tBody);
        }
        // The last element is the Timers node.
        // This will either activate the scene or turn on, off,
        // dim, brighten, or set the light level of the module if
        // it is the light module or turn on or off the appliance
        // module. This will be implemented.
        if (xmlObj.childNodes[3].tagName == "Timers")
        {
            //TODO: Implement a XML-to-Table parser that parses the XML data
            //      from the timers tag into the timer table.
        }
    }
}

// I stumbled across http://www.agavegroup.com/?p=32 and I borrowed the code from
// http://stackoverflow.com/questions/2792951/firefox-domparser-problem
// It took me a week to debug all my code until I find out what's going on with Firefox's
// DOM Inspector.
function removeWhitespace(node)
{
    for (var i = node.childNodes.length; i-- > 0; )
    {
        var child = node.childNodes[i];
        if (child.nodeType === 3 && child.data.match(/^\s*$/))
            node.removeChild(child);
        if (child.nodeType === 1)
            removeWhitespace(child);
    }
}

现在关于我的背景信息,我正在做这个作为COP2822(Web脚本)的项目,所以它只是Javascript而不是服务器端,所以我忍受了很多痛苦但是能够为了实现它,所以我最终使用Javascript的经验非常值得。不过,在我参加COP2822之前,我确实有一些Javascript经验。

2 个答案:

答案 0 :(得分:1)

欢迎来到SO。考虑到您复制粘贴代码

a_set.href = "javascript:ListAllModulesWithinScene(listScenes_row"
           + r + "_toggle)";//<br />

你的js代码中间有一个奇怪的br标记,你在函数调用中缺少)

如果您仍有问题,请发帖,我会尝试讨论。我建议您的浏览器或扩展程序提供一个javascript控制台。在我看来,它对调试非常宝贵。

答案 1 :(得分:0)

我认为你想要在sceneName参数值周围引用(转义):

a_set.href = "javascript:ListAllModulesWithinScene(\"listScenes_row" + r + "_toggle\")";