Sorry, when I pasted that script in, there were still no row colors, plus
the sorting function sstopped working.
On Tue, Dec 9, 2008 at 12:46 PM, Olivier Percebois-Garve <
[EMAIL PROTECTED]> wrote:
> ok. do that instead:
>
> <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( widgets: ['zebra'] );
> }
> );
> </script>
>
> On Tue, Dec 9, 2008 at 9:43 PM, David Blomstrom <[EMAIL PROTECTED]
> > wrote:
>
>> 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
>>
>
>
--
David Blomstrom
Writer & Web Designer (Mac, M$ & Linux)
www.geobop.org
