Thanks.
I changed my code accordingly...
<script src="/1A/JS/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="/1A/JS/tablesorter/jquery.tablesorter.js"
type="text/javascript"></script>
<script language="JavaScript" type="text/JavaScript">
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
</script>
<script>
$("table").tablesorter({
widgets: ['zebra']
});
</script>
* * * * *
But it works just as before; there are no table colors except when I
mouseover a row.
I'm assuming I only need to add the proper CSS.
According to this page -
http://docs.jquery.com/Tutorials:Zebra_Striping_Made_Easy - I need to create
CSS styles for .alt and .over. In fact, I already have those styles, yet
there's no background color.
Any tips?
Thanks.
On Tue, Dec 9, 2008 at 12:19 PM, Olivier Percebois-Garve <
[EMAIL PROTECTED]> wrote:
> sry. wrong paste:
>
> $("table").tablesorter({
> widgets: ['zebra']
> });
>
>
>
> On Tue, Dec 9, 2008 at 9:18 PM, Olivier Percebois-Garve <
> [EMAIL PROTECTED]> wrote:
>
>> The zebra code you have seems to be based on another library (Prototype
>> ?),
>> so it wont run using without it.
>> Anyway, there's a zebra plugin included by default in the tablesorter.
>> just do:
>>
>> $("table").tablesorter({
>>
>> widgets: ['zebra','repeatHeaders']
>> });
>>
>>
>>
>> Olivier
>>
>>
>>
>> On Tue, Dec 9, 2008 at 9:01 PM, David Blomstrom <
>> [EMAIL PROTECTED]> wrote:
>>
>>> I want to create a table that features sortable columns and alternate row
>>> colors. I found scripts that do one or the other, but when I implement both,
>>> the row color function is impaired.
>>>
>>> First, I downloaded the JQuery TableSorter plugin; hence the links to
>>> jquery-1.2.6.min.js and jquery.tablesorter.js below. Below that is the
>>> JavaScript for the "Zebra Stripes" function. When used together, the table
>>> exhibits no row colors except when I mouseover a row.
>>>
>>> Does anyone know how I can fix this?
>>>
>>> Thanks.
>>>
>>> * * * * *
>>>
>>> <script src="/1A/JS/jquery-1.2.6.min.js" type="text/javascript"></script>
>>>
>>> <script src="/1A/JS/tablesorter/jquery.tablesorter.js"
>>> type="text/javascript"></script>
>>>
>>>
>>> <script language="JavaScript" type="text/JavaScript">
>>> $(document).ready(function()
>>> {
>>> $("#myTable").tablesorter();
>>> }
>>> );
>>> </script>
>>>
>>> <script type="text/javascript">
>>> var Event = {
>>> add: function(obj,type,fn) {
>>> if (obj.attachEvent) {
>>> obj['e'+type+fn] = fn;
>>> obj[type+fn] = function() { obj['e'+type+fn](window.event); }
>>> obj.attachEvent('on'+type,obj[type+fn]);
>>> } else
>>> obj.addEventListener(type,fn,false);
>>> },
>>> remove: function(obj,type,fn) {
>>> if (obj.detachEvent) {
>>> obj.detachEvent('on'+type,obj[type+fn]);
>>> obj[type+fn] = null;
>>> } else
>>> obj.removeEventListener(type,fn,false);
>>> }
>>> }
>>>
>>> function $() {
>>> var elements = new Array();
>>> for (var i=0;i<arguments.length;i++) {
>>> var element = arguments[i];
>>> if (typeof element == 'string') element =
>>> document.getElementById(element);
>>> if (arguments.length == 1) return element;
>>> elements.push(element);
>>> }
>>> return elements;
>>> }
>>>
>>> String.prototype.trim = function() {
>>> return this.replace(/^\s+|\s+$/,"");
>>> }
>>>
>>> function addClassName(el,className) {
>>> removeClassName(el,className);
>>> el.className = (el.className + " " + className).trim();
>>> }
>>>
>>> function removeClassName(el,className) {
>>> el.className = el.className.replace(className,"").trim();
>>> }
>>>
>>> var ZebraTable = {
>>> bgcolor: '',
>>> classname: '',
>>> stripe: function(el) {
>>> if (!$(el)) return;
>>> var rows = $(el).getElementsByTagName('tr');
>>> for (var i=1,len=rows.length;i<len;i++) {
>>> if (i % 2 == 0) rows[i].className = 'alt';
>>> Event.add(rows[i],'mouseover',function() { ZebraTable.mouseover(this);
>>> });
>>> Event.add(rows[i],'mouseout',function() { ZebraTable.mouseout(this);
>>> });
>>> }
>>> },
>>> mouseover: function(row) {
>>> this.bgcolor = row.style.backgroundColor;
>>> this.classname = row.className;
>>> addClassName(row,'over');
>>> },
>>> mouseout: function(row) {
>>> removeClassName(row,'over');
>>> addClassName(row,this.classname);
>>> row.style.backgroundColor = this.bgcolor;
>>> }
>>> }
>>>
>>> window.onload = function() {
>>> ZebraTable.stripe('myTable');
>>> }
>>>
>>> </script>
>>>
>>>
>>
>
--
David Blomstrom
Writer & Web Designer (Mac, M$ & Linux)
www.geobop.org
