1

I have been trying to use set up this table here. http://www.ajaxblender.com/demos/tables/sortabletable/

I checked with my browser and the page is properly pulling the css and the .js files yet it gives me this error in reference to my sortabletable.js file

(screen shot of the error) http://i.imgur.com/iJa2Rz8.png

Here is a copy of the relevant part of the source code

<!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" xml:lang="en-US" lang="en-US">
<head>
  <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
  <title>Home page</title>
  <link rel="stylesheet" href="./_common/css/main.css" type="text/css" media="all">

<link href="sortableTable.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="./_common/js/mootools.js"></script>
<script type="text/javascript" src="sortableTable.js"></script>


</head>
<body>

<div id="container">
<div id="example">
        <div class="tableFilter">
            <form id="tableFilter" onsubmit="myTable.filter(this.id);     return false;">Filter: 
                <select id="column">
                    <option value="1">Firstname</option>
                    <option value="2">Lastname</option>
                    <option value="3">Department</option>
                    <option value="4">Start Date</option>
                </select>
                <input type="text" id="keyword" />
                <input type="submit" value="Submit" />
                <input type="reset" value="Clear" />
            </form>
      </div>
      <table id="myTable" cellpadding="0" cellpadding="0">
        <thead>
            <th axis="number">ID</th>
            <th axis="string">Firstname</th>
            <th axis="string">Lastname</th>
            <th axis="string">Department</th>
            <th axis="date">Start Date</th>
        </thead>
        <tbody>
            <tr id="1">
                <td class="rightAlign">1</td>
                <td>Sam</td>
                <td>Birch</td>
                <td>Programming</td>
                <td class="rightAlign">01/06/00</td>
            </tr>
            <tr id="2">
                <td class="rightAlign">2</td>
                <td>George</td>
                <td>Lo</td>
                <td>Support</td>
                <td class="rightAlign">01/07/99</td>
            </tr>
            <tr id="3">
                <td class="rightAlign">3</td>
                <td>kevin</td>
                <td>Walker</td>
                <td>Programming</td>
                <td class="rightAlign">01/06/05</td>
            </tr>
            <tr id="4">
                <td class="rightAlign">4</td>
                <td>Peter</td>
                <td>Aland</td>
                <td>Project Management</td>
                <td class="rightAlign">23/10/06</td>
            </tr>
            <tr id="5">
                <td class="rightAlign">5</td>
                <td>Rachel</td>
                <td>Dickinson</td>
                <td>Design</td>
                <td class="rightAlign">20/01/05</td>
            </tr>
            <tr id="6">
                <td class="rightAlign">6</td>
                <td>John</td>
                <td>Tsang</td>
                <td>Support</td>
                <td class="rightAlign">05/10/05</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tfoot>
      </table>


    <script type="text/javascript">
        var myTable = {};
        window.addEvent('domready', function(){
            myTable = new sortableTable('myTable', {overCls: 'over', onClick: function(){alert(this.id)}});
        });
    </script>
    </div>


</div>
</div>
</body>
</html>

any thoughts on what it could be?

Use $.find('tbody') to get all descendant tbodys and $.children('tbody') to get all children tbodys. Try this:

this.thead = this.table.children('thead');
this.tbody = this.table.children('tbody');
this.tfoot = this.table.children('tfoot');
this.elements = this.table.find('tr');
4

2 回答 2

1

用于$.find('tbody')获取所有tbody的后代和$.children('tbody')获取所有tbody的孩子。尝试这个：

this.thead = this.table.children('thead');
this.tbody = this.table.children('tbody');
this.tfoot = this.table.children('tfoot');
this.elements = this.table.find('tr');
于 2013-03-29T15:41:36.450 回答
0

Altough I don't see jQuery being loaded in your HTML sample, your question's title suggests that your are using jQuery in your site. If that's the case, your problem would be that there's a conflict between Mootools and jQuery because both libraries defines the $ function. To fix the issue, you will have to use jQuery.noConflict().

于 2013-03-29T15:45:20.103 回答