[jQuery] Mouse Down/Alternating Colors on Tables

<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word 10">
<meta name=Originator content="Microsoft Word 10">
<link rel=File-List href="cid:filelist.xml@01C6BA4A.0B91D250">

<style>

</style>

</head>
<body lang=JA link=blue vlink=purple style='tab-interval:42.0pt;text-justify-trim:
punctuation'>
<div class=Section1 style='layout-grid:18.0pt'>
I have been trying to tweak the script from the great
article on <a href="http://15daysofjquery.com/">15 Days Of jQuery</a> by
changing the color of the row on mouse down.<o:p></o:p>
<o:p> </o:p>
I have come across some strange issues in IE6 and
Safari, if you click on a row the background color changes, if you click on a
row a second time the background color is meant to removed.
The strange thing is this works only on alternating rows in IE6 and Safari. It
works great on Firefox, and if I add an alert box to
slow things down it works fine in IE6 and Safari as well.<o:p></o:p>
<o:p> </o:p>
Here is the function:<o:p></o:p>
<o:p> </o:p>
function dynamicTable() {<o:p></o:p>
 $(".content_table tr").mouseover(function() {$(this).addClass("over");}).mouseout(function() {$(this).removeClass("over");});<o:p></o:p>
 $(".content_table tr:even").addClass("alt");<o:p></o:p>
 $(".content_table tr").mousedown(function()
{<o:p></o:p>
 var what = $(this).get(0).className;<o:p></o:p>
 if( what == "alt over" || what == "over"
) $(this).addClass("down");<o:p></o:p>
 else $(this).removeClass("down");<o:p></o:p>
 }); <o:p></o:p>
}<o:p></o:p>
<o:p> </o:p>
If the function is tweaked and the alert box is added
like below, it works fine in all browsers:<o:p></o:p>
<o:p> </o:p>
function dynamicTable() {<o:p></o:p>
 $(".content_table tr").mouseover(function() {$(this).addClass("over");}).mouseout(function() {$(this).removeClass("over");});<o:p></o:p>
 $(".content_table tr:even").addClass("alt");<o:p></o:p>
 $(".content_table tr").mousedown(function()
{<o:p></o:p>
 var what = $(this).get(0).className;<o:p></o:p>
 alert( what );<o:p></o:p>
 if( what == "alt over" || what == "over"
) $(this).addClass("down");<o:p></o:p>
 else $(this).removeClass("down");<o:p></o:p>
 }); <o:p></o:p>
}<o:p></o:p>
<o:p> </o:p>
Has anyone experience these kind
of problems before?<o:p></o:p>
<o:p> </o:p>
See full page below:<o:p></o:p>
<o:p> </o:p>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><o:p></o:p>
<html xmlns="http://www.w3.org/1999/xhtml"><o:p></o:p>
<head><o:p></o:p>
<meta
http-equiv="Content-Type" content="text/html; charset=utf-8" /><o:p></o:p>
<title>Test
Table</title><o:p></o:p>
<style type="text/css"><o:p></o:p>
<o:p></o:p>
</style><o:p></o:p>
<script language="JavaScript" src="/js/jquery.js"
type="text/javascript"></script><o:p></o:p>
<script type="text/javascript"><o:p></o:p>
$(document).ready(function(){<o:p></o:p>
 dynamicTable(); <o:p></o:p>
});<o:p></o:p>
function dynamicTable() {<o:p></o:p>
 $(".content_table tr").mouseover(function() {$(this).addClass("over");}).mouseout(function() {$(this).removeClass("over");});<o:p></o:p>
 $(".content_table tr:even").addClass("alt");<o:p></o:p>
 $(".content_table tr").mousedown(function()
{<o:p></o:p>
 var what = $(this).get(0).className;<o:p></o:p>
 if( what == "alt over" || what == "over"
) $(this).addClass("down");<o:p></o:p>
 else $(this).removeClass("down");<o:p></o:p>
 }); <o:p></o:p>
}<o:p></o:p>
</script><o:p></o:p>
</head><o:p></o:p>
<body><o:p></o:p>
<table class="content_table"><o:p></o:p>

<thead><o:p></o:p>
 <tr><o:p></o:p>

<th>Lorem</th><o:p></o:p>

<th>Ipsum</th><o:p></o:p>

<th&g

[jQuery] Mouse Down/Alternating Colors on Tables

[jQuery] Mouse Down/Alternating Colors on Tables

Topic Participants

michael.langford

abba.bryant

John Resig