Question

我想创建一个事件，当我点击一个项目列表时，它将生成一个表格，其中包含链接标记的结果和td上的一些文本，我正在使用MooTools。

我的问题是每当我用浏览器打开我的html代码并检查代码时，在点击项目列表后，使用Chrome上的开发人员工具和firefox上的firebug，它会说：

未捕获的ReferenceError：未定义HtmlTable。

这是我的代码：

HTML

<html>
<head>
    <script type="text/javascript" src="js/mootools-core-1.3.js"></script>
    <script type="text/javascript" src="js/mootools-more-1.3.2.1.js"></script>
    <script type="text/javascript" src="js/pop-up.js"></script>
    <link rel="stylesheet" type="text/css" href="css/pop-up.css"/>
</head>
<body>
<div id="wrapper">
        <h1>Pop Ups</h1>
        <ul>
            <li>Good Bros</li>
            <li>Kinds</li>
            <li>Helpful</li>
            <li>Good Knowledge</li>
        </ul>
        <div class="over-lay"></div>
        <div id="pop-up">
            <div class="menu-tab">
                <ul>
                    <li><a href="#" title="#">Act</a></li>
                    <li><a href="#" title="#">NSW</a></li>
                    <li><a href="#" title="#">QLD</a></li>
                    <li><a href="#" title="#">SA</a></li>
                    <li><a href="#" title="#">TAS</a></li>
                    <li><a href="#" title="#">VIC</a></li>
                    <li><a href="#" title="#">WA</a></li>
                </ul>
            </div>
            <div id="pop-up-content">
            </div>
            <div id="pagination">
                append pagination link
            </div>
        </div>
</div>      
</body>
</html>

的JavaScript

window.addEvent('load', function(){


//create new element
    //create table as a global variable
    var table;
    var link = 'http://www.google.com';
    var linkText = 'Atlanta';
    var address = 'cd and R Winne St';      
    var myTable = new HtmlTable({
            properties: {
            border: 1,
            cellspacing: 3
        },
            headers: ['fruits', 'colors'],
            rows: [
                ['apple', 'red'],
                ['lemon', 'yellow']
            ]
    });
    //this is a function to add rows to table;
    var addRowToTable = function () {

        //loop to create 10 table rows
        for (var i=0; i<10; i++) {
            //create a new <a> tag
            var aTag = new Element ('a', {
                href: link,
                title: 'Name of City',
                html: linkText,
            });
            //add row to table
            MyTable.push([aTag, address]);
        }
    }

    var li = $$('li');
    li.addEvent('click', function(){
        addRowToTable();        
    });
    //inject table to div pop-up-content
    table.inject($('pop-up-content'));

});

如何使HtmlTable类与Mootools 1.3一起使用

0 个答案: