Elite Zebra Tables 2.1

Introduction

(top)

Zebra tables are a great way to display data in a manner easy on the eyes.

Here, we elaborate on Jop de Klein's modifications of the original zebra tables script by David F. Miller. These original scripts provide the basis for styling html tables with alternating row colors and allowing row selection using simple javascript.

These tables are also sortable. By clicking on a designated header, the table will sort itself using javascript. This part of the widget comes from kryogenix.org's sortable tables script.

So what has eklekt.com contributed?
Well, first of all, we have combined the two scripts to work together. We have also expanded the sortable script to allow the user to specify which columns should be sortable. This way, if you have a column which you do not want to be able to sort by, you can. Also, we have written a script to allow you to submit the selected rows of a table using a form (oh, and by the way, your order is preserved when you submit). You can also have links within the zebra/sortable tables. And finally, you can have more than one zebra table or sortable table, or a combination, on the same page. Check it out below.

How to Use

(top)

Selection & Submission

1. General Uses
   • Give your table a classname of selectable. If you want to submit the selections (and other data) in your table, encapsulate the table in a form tag. To get the form to submit the values of the rows in your table, you should include a column of checkboxes in your table with the appropriate name and value attributes. Each time a row is selected, the checkbox will be marked, and vice versa. Also, It is possible to make the checkbox column not display.
2. Making rows selected by default
   • To make a row selected by default, give its checkbox input an attribute of checked="checked".
     Example: <input type="checkbox" ... checked="checked">
3. Disabling rows
   • To disable a row, give it a class name of "disabled". If there are checkboxes in that row, you should disable them as well by adding disabled="disabled".
4. Hiding the checkbox column
   • To hide a column, give every cell in that column a class of "hideme". This includes header cells and footer cells as well. The script will go through the table and make each of these cells have a display property of 'none'. (See the Notes to learn why we must do this.)
5. Using select all and select none
   • Create a button within the table and assign it a class of either 'select_all' or 'select_none' - depending upon which behavior you want to assign to it.

Notes

(top)

Why can't we use the colgroup tag to hide the checkbox columns?

This actually does work in IE and cleans up the html markup quite considerably. However, the colgroup tag is not totally supported in other browsers (namely Firefox). There seems to be a dispute about some ambiguity in the css specifications as to which attributes can be applied to colgroups. The 'display' property doesn't apply to colgroups in Firefox (maybe visibility:collapse would work?) so the best way to get the script working cross-browser was to have the javascript actually hide each element individually.

Why is your script good?

Look at the html! It's clean and easily understandable. There are no "onclick" events scattered in every row or cell. The javascript automatically handles all of that. And, the styles are easily customizable through the use of css. It just makes things a lot more readable. I'm sure there are more reasons, but that's why I like it.

Why is your script bad?

Because the functionality of the sort and the select both depend on javascript. Well...it all depends on javascript - but the zebra striping has no functionality, it is purely cosmetic. So if that is not working, then it isn't going to affect your page.

Why do your notes suck so much?

As I've said before...I'm lazy. And drunk.
ENJOY!!!

Changes

(top)

1. Sort can handle negative numbers now.
2. Submission deprecates and works when javascript is turned off.

Required Files

(top)

• script
• stylesheet

Previous Versions

(top)

1. Version 1.0
2. Version 1.1
3. Version 2.0

Demo

(top)

Sortable Selectable Zebra Table

Note that only the first two columns are sortable. Also, the italicized rows are not selectable. Finally, the bottom three rows of the table are sorted independently.

	Pos	Artist	Trackname
	1,000,301	Lost In The Plot	The Dears
	21,097,301	Poison	The Constantines
	39	Plea From A Cat Named Virtute	The Weakerthans
	4,987,143	Can't pick me!	No sir!
	5,981	Living Room	Tegan And Sara
	612	Can't pick me either	Nope
	7	Fast Money Blessing	King Cobb Steelie
	85	Sore	Buck 65
	9,231,231	Love Travel	Danko Jones
	0	I'm sorted separately	toupee
	5	AAA I'm sorted separately	blah blah blah
	38	ZZZ AAA I'm sorted separately	blee

---

Sortable Table

The 'clickable' headers have white text and a grey arrow, so it may be difficult to see them on this page. However, this is a simple change which can be made in the stylesheets.
Also, notice that this table sorts all of the rows together, unlike the previous example which had two different "groups" to sort.

Pos	Artist	Trackname
1	Lost In The Plot	The Dears
2	Poison	The Constantines
3	Plea From A Cat Named Virtute	The Weakerthans
4	Melissa Louise	Chixdiggit!
5	Living Room	Tegan And Sara
6	Speed	Bran Van 3000
7	Fast Money Blessing	King Cobb Steelie
8	Sore	Buck 65
9	Love Travel	Danko Jones
10	You Never Let Me Down	Furnaceface

---

Striped Table

Pos	Artist	Trackname
1	Lost In The Plot	The Dears
2	Poison	The Constantines
3	Plea From A Cat Named Virtute	The Weakerthans
4	Melissa Louise	Chixdiggit!
5	Living Room	Tegan And Sara
6	Speed	Bran Van 3000
7	Fast Money Blessing	King Cobb Steelie
8	Sore	Buck 65
9	Love Travel	Danko Jones
10	You Never Let Me Down	Furnaceface