We found a JQuery plugin called FixedTable that is used to add scroll bars to an HTML table, and I've copied their sample code (see below) from their website into a ASP.Net web form. Each time the code executes it blows up on line 12, the $(".tableDiv").each(function(), saying that an Object was Expected. Anyone know what is wrong with this code?
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="fixedtable.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="~/js/jquery-1.3.2-vsdoc2.js"></script>
<script type="text/javascript" src="~/js/jquery.fixedtable.js"></script>
<script type="text/javascript">
// this "tableDiv" must be the table's class
$(".tableDiv").each(function() {
var Id = $(this).get(0).id;
var maintbheight = 555;
var maintbwidth = 911;
$("#" + Id + " .FixedTables").fixedTable({
width: maintbwidth,
height: maintbheight,
fixedColumns: 1,
// header style
classHeader: "fixedHead",
// footer style
classFooter: "fixedFoot",
// fixed column on the left
classColumn: "fixedColumn",
// the width of fixed column on the left
fixedColumnWidth: 150,
// table's parent div's id
outerId: Id,
// tds' in content area default background color
Contentbackcolor: "#FFFFFF",
// tds' in content area background color while hover.
Contenthovercolor: "#99CCFF",
// tds' in fixed column default background color
fixedColumnbackcolor: "#187BAF",
// tds' in fixed column background color while hover.
fixedColumnhovercolor: "#99CCFF"
});
});
</script>
<style type="text/css">
body
{
width: 900px;
}
p
{
float:left;
width: 100%;
margin: 20px 0px;
}
.fixedColumn .fixedTable td
{
color: #FFFFFF;
background-color: #187BAF;
font-size: 12px;
font-weight: normal;
}
.fixedHead td, .fixedFoot td
{
color: #FFFFFF;
background-color: #187BAF;
font-size: 12px;
font-weight: normal;
padding: 5px;
border: 1px solid #187BAF;
}
.fixedTable td
{
font-size: 8.5pt;
background-color: #FFFFFF;
padding: 5px;
text-align: left;
border: 1px solid #CEE7FF;
}
.tableDiv
{
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="tableDiv_Arrays" class="tableDiv">
<table id="Open_Text_Arrays" class="FixedTables">
<thead>
<tr>
<th>
Purpose
</th>
<th>
C#
</th>
<th>
Php4
<th>
<th>
Php5
</th>
<th>
ActionScript
</th>
<th>
JavaScript
</th>
<th>
Ruby
</th>
</tr>
<thead>
<tbody>
<tr>
<th>
data1
</th>
<th>
data2
</th>
<th>
data3
<th>
<th>
data4
</th>
<th>
data5
</th>
<th>
data6
</th>
<th>
data7
</th>
</tr>
</tbody>
<tfoot>
<tr>
<th>
Purpose
</th>
<th>
C#
</th>
<th>
Php4
<th>
<th>
Php5
</th>
<th>
ActionScript
</th>
<th>
JavaScript
</th>
<th>
Ruby
</th>
</tr>
</tfoot>
</table>
</div>
</form>
</body>
</html>