Search jQuery

jQuery Forum

How to highlight table rows within an accordion and tabs

in Using jQuery UI • 9 years ago

I have multi-tab and in each tab I have an accordion each accordion has a table. Need help in highlighting each row on mouse over regardless of which tab or accordion I am selecting. Thanks guys.

P.S. Suggestions for on the coding like CSS is or any way to shorten the code is also welcome. Total newbie in HTML and jquery.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Paper Settings</title>
<link rel="stylesheet" href="../jquery-ui-1.10.3.custom.css">
<script src="../jquery-1.9.1.js"></script>
<script src="../jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#accordion").accordion();
$("#accordion1").accordion();
$("#accordion2").accordion();
$('#tabs').tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<div id="accordion">
<h3>Section10</h3>
<div>
<table cellspacing="0" cellpadding="3" border="1" width="100%">
<tbody>
<tr>
<td rowspan="2" align="center" bgcolor="#e1f4ff"><span style="font-weight: bold; font-size: 11pt">Media</span>
<td colspan="2" align="center" bgcolor="#e1f4ff"><span style="font-weight: bold; font-size: 11pt">Paper</span>
<td colspan="2" align="center" bgcolor="#e1f4ff"><span style="font-weight: bold; font-size: 11pt">Driver</span>
</tr>
<tr>
<td align="center" bgcolor="#e1f4ff"><span style="font-weight: bold">ICC Profile</span>
<td align="center" bgcolor="#e1f4ff"><span style="font-weight: bold">Download</span>
<td align="center" bgcolor="#e1f4ff"><span style="font-weight: bold">Paper Choice</span>
<td align="center" bgcolor="#e1f4ff"><span style="font-weight: bold">Quality</span>
</tr>
<tr>
<td>Ultra Premium Photo Paper Glossy<br/><em>formerly Ultra Premium Glossy Photo Paper</em>y
<td>SP1400 1410 UPGP.icc
<td align="center">N
<td>Ultra Premium Photo Paper Glossy
<td>
<select name="Quality" id="Quality">
<option selected="selected">Photo</option>
<option>Photo RPM</option>
</select>
</tr>
<tr>
<td>Premium Photo Paper Glossy<br/><em>formerly Premium Glossy Photo Paper</em>
<td>SP1400 1410 PGPP.icc
<td align="center">N
<td>Premium Photo Paper Glossy
<td>
<select name="Quality" id="Quality">
<option selected="selected">Photo</option>
<option>Photo RPM</option>
</select>
</tr>
</tbody>
</table>
</div>
<h3>Section20</h3>
<div></div>
<h3>Section30</h3>
<div></div>
<h3>Section40</h3>
<div></div>
</div>
</div>
<div id="fragment-2">
<div id="accordion1">
<h3>Section11</h3>
<div>
<table cellspacing="0" cellpadding="3" border="1" width="100%">
<tbody>
<tr>
<td rowspan="2" align="center" bgcolor="#e1f4ff"><span style="font-weight: bold; font-size: 11pt">Media</span>
<td colspan="2" align="center" bgcolor="#e1f4ff"><span style="font-weight: bold; font-size: 11pt">Paper</span>
<td colspan="2" align="center" bgcolor="#e1f4ff"><span style="font-weight: bold; font-size: 11pt">Driver</span>
</tr>
<tr>
<td align="center" bgcolor="#e1f4ff"><span style="font-weight: bold">ICC Profile</span>
<td align="center" bgcolor="#e1f4ff"><span style="font-weight: bold">Download</span>
<td align="center" bgcolor="#e1f4ff"><span style="font-weight: bold">Paper Choice</span>
<td align="center" bgcolor="#e1f4ff"><span style="font-weight: bold">Quality</span>
</tr>
<tr>
<td>Ultra Premium Photo Paper Glossy<br/><em>formerly Ultra Premium Glossy Photo Paper</em>y
<td>SP1400 1410 UPGP.icc
<td align="center">N
<td>Ultra Premium Photo Paper Glossy
<td>
<select name="Quality" id="Quality">
<option selected="selected">Photo</option>
<option>Photo RPM</option>
</select>
</tr>
<tr>
<td>Premium Photo Paper Glossy<br/><em>formerly Premium Glossy Photo Paper</em>
<td>SP1400 1410 PGPP.icc
<td align="center">N
<td>Premium Photo Paper Glossy
<td>
<select name="Quality" id="Quality">
<option selected="selected">Photo</option>
<option>Photo RPM</option>
</select>
</tr>
</tbody>
</table>
</div>
<h3>Section21</h3>
<div>
<table cellspacing="0" cellpadding="3" border="1" width="100%">
<tbody>
<tr>
<td rowspan="2" align="center" bgcolor="#e1f4ff"><span style="font-weight: bold; font-size: 11pt">Media</span>
<td colspan="2" align="center" bgcolor="#e1f4ff"><span style="font-weight: bold; font-size: 11pt">Paper</span>
<td colspan="2" align="center" bgcolor="#e1f4ff"><span style="font-weight: bold; font-size: 11pt">Driver</span>
</tr>
<tr>
<td align="center" bgcolor="#e1f4ff"><span style="font-weight: bold">ICC Profile</span>
<td align="center" bgcolor="#e1f4ff"><span style="font-weight: bold">Download</span>
<td align="center" bgcolor="#e1f4ff"><span style="font-weight: bold">Paper Choice</span>
<td align="center" bgcolor="#e1f4ff"><span style="font-weight: bold">Quality</span>
</tr>
<tr>
<td>Ultra Premium Photo Paper Glossy<br/><em>formerly Ultra Premium Glossy Photo Paper</em>y
<td>SP1400 1410 UPGP.icc
<td align="center">N
<td>Ultra Premium Photo Paper Glossy
<td>
<select name="Quality" id="Quality">
<option selected="selected">Photo</option>
<option>Photo RPM</option>
</select>
</tr>
<tr>
<td>Premium Photo Paper Glossy<br/><em>formerly Premium Glossy Photo Paper</em>
<td>SP1400 1410 PGPP.icc
<td align="center">N
<td>Premium Photo Paper Glossy
<td>
<select name="Quality" id="Quality">
<option selected="selected">Photo</option>
<option>Photo RPM</option>
</select>
</tr>
</tbody>
</table>
</div>
<h3>Section31</h3>
<div></div>
<h3>Section41</h3>
<div></div>
</div>
</div>
<div id="fragment-3">
<div id="accordion2">
<h3>Section12</h3>
<div>
<table cellspacing="0" cellpadding="3" border="1" width="100%">
<tbody>
<tr>
<td rowspan="2" align="center" bgcolor="#e1f4ff"><span style="font-weight: bold; font-size: 11pt">Media</span>
<td colspan="2" align="center" bgcolor="#e1f4ff"><span style="font-weight: bold; font-size: 11pt">Paper</span>
<td colspan="2" align="center" bgcolor="#e1f4ff"><span style="font-weight: bold; font-size: 11pt">Driver</span>
</tr>
<tr>
<td align="center" bgcolor="#e1f4ff"><span style="font-weight: bold">ICC Profile</span>
<td align="center" bgcolor="#e1f4ff"><span style="font-weight: bold">Download</span>
<td align="center" bgcolor="#e1f4ff"><span style="font-weight: bold">Paper Choice</span>
<td align="center" bgcolor="#e1f4ff"><span style="font-weight: bold">Quality</span>
</tr>
<tr>
<td>Ultra Premium Photo Paper Glossy<br/><em>formerly Ultra Premium Glossy Photo Paper</em>y
<td>SP1400 1410 UPGP.icc
<td align="center">N
<td>Ultra Premium Photo Paper Glossy
<td>
<select name="Quality" id="Quality">
<option selected="selected">Photo</option>
<option>Photo RPM</option>
</select>
</tr>
<tr>
<td>Premium Photo Paper Glossy<br/><em>formerly Premium Glossy Photo Paper</em>
<td>SP1400 1410 PGPP.icc
<td align="center">N
<td>Premium Photo Paper Glossy
<td>
<select name="Quality" id="Quality">
<option selected="selected">Photo</option>
<option>Photo RPM</option>
</select>
</tr>
</tbody>
</table>
</div>
<h3>Section22</h3>
<div></div>
<h3>Section32</h3>
<div></div>
<h3>Section42</h3>
<div></div>
</div>
</div>
</div>
</body>
</html>

Replies(1)

mike_laird

Re: How to highlight table rows within an accordion and tabs

9 years ago

HTML tables are not a good way to format your page. Though maybe they "should work" in all situations, they sometimes don't, and its painful to figure that out. Secondly, you are building a maintenance nightmare. In 6 months, when someone decides the color or font should be a bit different in 2 of the cases because of a special sale, it will be a challenge to figure out this pile of code and to change it.

Write normal <p> text with id and class attributes and use CSS to arrange, size and style them. Lots of books and tutorials are around to show how to do that. External CSS sheets can be structured so its easy to make changes.

Your question is easily answered, probably by you, when you use class attributes. Some class will be used to identify all the hovers you want, any where you want them.

FWIW, I found Headfirst HTML to be an excellent starter book. Just ignore all the stuff they say about XHTML - it didn't fly, and HTML5 is the way to go.

Top Reply

Response title

Attachments

jQuery Forum

How to highlight table rows within an accordion and tabs

Replies(1)

Re: How to highlight table rows within an accordion and tabs

Statistics

Tags

Actions