Take a look at this HTML code snippet:
<html>
<head>
<style type="text/css">
tr.Class1
{
background-color: Blue;
}
.Class2
{
background-color: Red;
}
</style>
</head>
<body>
<table>
<tr id="tr1">
<td>Row 1</td>
</tr>
<tr id="tr2">
<td>Row 2</td>
</tr>
</table>
</body>
</html>
The script section below raises some questions. What will happen when the first row is clicked on? Will it maintain its blue color, or will it change to red? If it stays blue, how can I make it turn red without removing the Class1 class (so that later I can remove the Class2 class and have the row return to its original blue color)?
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#tr1").addClass("Class1");
$("tr").click(function() {
/* When clicked, the selected tr should be highlighted with the Class2 class, while ensuring only one row is selected at any given time */
$(".Class2").removeClass("Class2");
$(this).addClass("Class2");
});
});
</script>
Update: I experimented with this but encountered unexpected behavior in both FireFox and IE. Can you help identify what might be causing the issue?