» Earn Fame and Fortune in the Nettuts/Screenr Screencast Competition

The Nettuts+ made a Earn Fame and Fortune in the Nettuts/Screenr Screencast Competition and this is my work:

The screencast is about alternately colorizing table rows, adding other color on mouse over and on click events. Everything made by 4 lines of CSS and a bit more of jQuery JavaScript code.

All posted screencasts can be found on: NETTUTS/favorites.

Follow me on twitter
Watch & Enjoy

Source Demo

Code

For those who want some code written (for read, copy & paste):

Table

Firstly we need some table element (with id) putted into document. Structure of the table is very simple:

<table id="nettuts_table">
<thead>
<tr>
<td>ID</td>
<td>NAME</td>
<td>DELETE</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>NAME 1</td>
<td><a href="#" class="del" title="Delete item 1"><img src="del.png" alt="delete" /></a></td>
</tr>
</tbody>
</table>

CSS

Next we will need just a bit of CSS, for this work it would be only this:

body {text-align: center;}
#nettuts_table {width: 400px; padding: 5px; margin: 10px auto;}
td {border: 1px silver solid; padding: 5px; text-align: center;}
thead td {background: #CFCFCF;}
 
.odd{background-color:#EFEFEF;}
.even{background-color:#F9F9F9;}
.over{background-color: #CCCCFF;}
.click{background-color: #eee8aa;}

Important in this CSS are the 4 last classes, which would describe the background color for the table.

JavaScript

Almost the last but not the least is JavaScript. Firstly we need to attach the scripts to the document:

<script type="text/javascript" charset="UTF-8" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" ></script>
<script type="text/javascript" charset="UTF-8" src="script.js"></script>

In the code under we use jQuery from googlecode, and our script.js which we are gonna to write now. Our function to colorize table rows need to find odd and even elements of the tbody section and colorize it alternatively. Then it would add another classes for the mouseover, mouseout, click events. Let’s start:

function colorizeTable(table){
	table.find('tbody tr:odd').removeClass().addClass("odd").children(':nth-child(3)').html('.odd: #EFEFEF');
	table.find('tbody tr:even').removeClass().addClass("even").children(':nth-child(3)').html('.even: #F9F9F9');
	table.find('tbody tr').
		mouseover(function() {$(this).addClass("over");}).
		mouseout(function() {$(this).removeClass("over");}).
		click(function() {$(this).toggleClass("click");});
}

To see if our script is working even after deleting a table row we need small piece of code:

$('a.del').click(function(){
	var row = $(this).closest("tr");
	var tab = row.parent().parent().parent();
	row.animate({opacity: 1.0},2500).fadeOut('slow').remove();
});

After click action evoked on the anchor tag with del class script finds the closest tr element and the parent element table. Then hides the row, and removes it. The table element needs to be remembered for colorizeTable function.

Let’s combine the whole js script.

$(document).ready(function(){
	/* Colorize table function */
	function colorizeTable(table){
		table.find('tbody tr:odd').removeClass().addClass("odd").children(':nth-child(3)').html('.odd: #EFEFEF');
		table.find('tbody tr:even').removeClass().addClass("even").children(':nth-child(3)').html('.even: #F9F9F9');
		table.find('tbody tr').
			mouseover(function() {$(this).addClass("over");}).
			mouseout(function() {$(this).removeClass("over");}).
			click(function() {$(this).toggleClass("click");});
	}
	/* Delete table row */
	$('a.del').click(function(){
		var row = $(this).closest("tr");
		var tab = row.parent().parent().parent();
		row.animate({opacity: 1.0},2500).fadeOut('slow').remove();
		colorizeTable(tab);
	});
	/* After document.ready evoke the colorizeTable function */
	colorizeTable($('#nettuts_table'));
});

You can test it live here: colorizeTable
Download zipped package: colorizeTable_blog.vokiel.com.zip

Vokiel.com

Web Developer Blog